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.
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
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.
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
I will post it if I can figure out (specially regarding to opacity)
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.
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!
@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
With the help from @weeman, I have implemented the following solution. Works both for larger and smaller content, preserves the rounded corners on iOS:
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