Popover sizing

8

I use popover views for context menus. They open when a button on the right side of the header bar has been tapped. If the context-menu has only a few entries there is much white space. In this case fitting the popover to the content’s size looks more nicely and makes sense.

To fit the popover I use the following CSS and add the class “fit” to the popover.

ion-popover-view.fit {
  height: auto !important;
}

ion-popover-view.fit ion-content {
  position: relative !important;
}

.platform-android ion-popover-view.fit {
  margin-top: 10px !important;
}

CodePen example:

13 Likes