Vertically Split Popover Content

Question

My goal is to have an Ionic 3 Popover have a "top section" and a "bottom section." I'd like the top section to take up, lets say the top 70% of the PopOver and the bottom section to take up, lets say the bottom 30% of the PopOver. I'd like to put arbitrary content in the top section and have it be scrollable if that content exceeds the vertical space allotted to the top section. The bottom section content is fixed, and should always be present regardless of the scrolling of the top section, and should never have a scrollbar associated with it.

I've made the following attempt at this behavior using stackblitz: https://stackblitz.com/edit/ionic-4k2dbz

So, how might I change the content of components/my-popover/my-popover.html or components/my-popover/my-popover.scss to achieve the layout / behavior described above?

Answer 1

If real quick I would think this way:

• popovers in Ionic by default take 90% of the viewport based on the docs (max height - https://ionicframework.com/docs/api/components/popover/PopoverController/)
• we can use max-height to limit the top pane div and set its overflow to auto
• we can use min-height / max-height to fix bottom pane div and set its overflow to hidden;
• now since you need 30/70 split we need to prorate it based on 90% max height of Popover (I used 65/25 below)

https://stackblitz.com/edit/ionic-x3pkwv

But then when tested in an ionic app across multiple devices the above, I think, it may get messed up a bit depending on screen sizes etc. So you may consider using ion-grid which is flexbox based. Here is the solution below:

https://stackblitz.com/edit/ionic-ikvjiw