Popover sizing

Is there a way to control the size of a popover control?

I am using a popover as a menu like in the example (http://codepen.io/ionic/pen/GpCst). This works well if there are exactly 5 items like in the example. If there are fewer items then there is whitespace at the bottom of the menu and, if there are more items, it scrolls within the small area even if there is more room on the page.

Is there a way to have the size based on the available space on the screen and then scroll if there is not enough room for all the items.

I tried changing the ion-content element within the ion-popover-view to be a div and that resulted in an auto sized menu but it did not work if the menu was larger than the size of the page.

3 Likes

You can modify the size in the ionic css file, I did that for my project but I can’t tell if it can have the size of the content, I tried without success.

I hope you understood, I have an approximative engilsh

You can do it this way (in popover template):

<style>.popover { height:500px; width: 600px; }</style>
<ion-popover-view>
   ...you content goes here...

Hello,

By “hardcode way” but I had the same problem and I have solved with a code like this:

<script id="my-popover.html" type="text/ng-template">
    <ion-popover-view style="height: {{(70 * years.length) + 'px'}};">
        <ion-header-bar class="item item-divider">
                Seleccionar año
        </ion-header-bar>
        <ion-content>
            <ion-radio ng-repeat="year in years" class="item"
                       ng-model="currentYear"
                       ng-value="{{year.value}}">
                {{year.label}}
            </ion-radio>
        </ion-content>
    </ion-popover-view>
</script> 

The “magic number” 70 is the height of each item. Additionally you can add more styles like “overflow-y: scroll;”.

I hope that someone could share a better solution :smile:

4 Likes

This does seem to be needed functionality. The hack from @programwar is working, but it does seem a bit ugly.

I also added a max-height as a percent, and set the scroll-content to use native scrolling, so if the items don’t fit on the screen (landscape mode), the user can still access them.

Is there an update for this allready? i need the popover to fit the content, now i have content and huge whitespace

If you know what is going to be inside, like me, but you want to get another kind of popover (with items horizontally aligned, instead a list, for example), you can tune it with css, but the position and the opacity are hardcoded in the js file (not even with css). I am (so far) unable to re-write the ion-popover-view css styles after instanced or just before rendered, if anyone can provide any clue about how to do it, please report :wink:

I will post it if I can figure out (specially regarding to opacity)

cheers

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

That is awesome. I was just about to sit down and figure out how to do this. My “more” menu item can be various places on the screen however, and I’m noticing that the menu no longer shows in the right place. I’m going to play around with it a bit, but if you have any suggestions, they’d be much appreciated!

Thanks!

@weeman this worked well, thanks for this. Only thing is now the content is scrollable and can be scrolled out of sight. It’s kind of a bit buggy. Decided to just hardcode the height style attribute for the ion-popover-view since I know I only have two list elements, similar to @programwar’s solution

 <ion-popover-view style="height: 125px">
    <ion-content>
      <div class="list positive">
        <a class="item" href="#" ng-click="closePopover()">
          Event Date 
        </a>
        <a class="item" href="#" ng-click="closePopover()">
          Popularity
        </a>
      </div>
    </ion-content>
  </ion-popover-view>

Works fine for now.

The scroll can be disabled as any other ion-content element by just using <ion-content scroll="false">

If your popover uses headers/footers, you’ll also need to add this:

ion-popover-view.fit ion-header-bar,
ion-popover-view.fit ion-footer-bar {
	position: relative !important;
}

ion-popover-view.popover .has-header {
	top: 0 !important;
}

ion-popover-view.popover .has-footer {
	bottom: 0 !important;
}

this method seems to be broken in the latest rc, unfortunately:

See the Pen NPmmOG by Matt Prestlien (@mattchue) on CodePen.

For me i solved with.

.popover .scroll-content{
	overflow: visible!important;}

and few more css to beauty my popover theme :smiley: …

hope to be helpfull…

with love From Dominican Republic.
image

1 Like

This doesn’t fix it for me. Seems like this only fixes the items being shown, but not the enclosing popover.

With the help from @weeman, I have implemented the following solution. Works both for larger and smaller content, preserves the rounded corners on iOS:

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

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

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

.platform-ios ion-popover-view.fit {
  padding-top: 10px;
  padding-bottom: 10px;
}

See the demo: http://codepen.io/vladius/pen/VLEOQo

Note, that I have also disabled the menu scroll for this demo.

10 Likes

Very nice stuff! Thanks!

Does anyone have a solution with scroll enabled? All solutions are nice but not clean.

savior! this fix really worked for what I was looking for!

That’s a really cool solution @vladius !

However, that top and bottom padding doesn’t look so good on iOS. I think in this case it is better to use border-radius on the first and last items. I made a fork of your CodePen to demonstrate: http://codepen.io/andutm/pen/ONXoRr

Relevant part:

.platform-ios ion-popover-view.fit .item:first-child {
  border-radius: 10px 10px 0 0;
}
.platform-ios ion-popover-view.fit .item:last-child {
   border-radius: 0 0 10px 10px;
}

Even better, if using Ionic SASS variables:

.platform-ios ion-popover-view.fit {
    .item:first-child {
        border-radius: $popover-border-radius-ios $popover-border-radius-ios 0 0;
    }
    .item:last-child {
        border-radius: 0 0 $popover-border-radius-ios $popover-border-radius-ios;
    }
}