feat: Modal with dynamic height. Docs for class ion-page.
fudom opened this issue · comments
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Describe the ion-page class which is automatically added on runtime when using modal controller to view a component. Consider adding an option to prevent adding this class.
Describe the Use Case
Showing a modal with dynamic height but with scollable content makes is very challenging in Ionic. In the docs here I see the usage of ion-page. But no description why and what this is.
Maybe it would be also great if there is an example of modal with dynamic height (created via controller). And/or add an option to the modal to simply set a modal with dynamic height. In my case, I want a sticky header and scrollable the content with max-height 100%. The ion-content is not suitable for that, because it's always height 0 in a dynamic context. So I replaced it by a div.
My current solution:
Change the window width and height. Here is the demo without editor. You can use the DevTool device view to allow smaller view sizes.
ion-modal {
--width: 100%;
--height: 100%;
--max-width: 600px;
--max-height: 600px;
--border-radius: 5px;
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
padding: 10px;
}
ion-modal.dynamic-height {
--width: 100%;
--height: unset;
--max-height: 100%;
&::part(content) {
overflow: auto;
}
.ion-page {
overflow: unset;
ion-header {
position: sticky;
top: 0;
}
}
}What does this code?
-
Ensure the modal is always displayed as modal. Never view it in fullscreen. Keep padding, rounded corners and shadow. Also a max-width and max-height. The appearance should be a modal overview. Never mock a page.
-
Dynamic height by unchain the height. But max-height to screen edge for later scrolling. In this solution we use the content for scroll (overflow: auto). And the overflow of ion-page (which is added to the component) needs to be unset. This allows us to use sticky header.
So it works. I found a solution. But could we please support this in a easier way? There are other solutions too. Maybe with ion-content? No need for sticky header then. Maybe you got the point. Don't hesitate to ask me for more information. I just don't want to hack or write a book to have such modals. That do you think? Can Ionic support it?
The problem with ion-page added to the modal component, is that this makes the page display flex with space between. Without ion-content, you have a gap here and content is not scollable anymore.
Thank you for the request. It looks like this is more of a docs question, so I've transferred the issue to the docs repo.
ion-modal is intended to be used mainly as a full-screen overlay. We have a section in the docs about creating modals with custom or dynamic sizes (with example code) here: https://ionicframework.com/docs/api/modal#custom-dialogs Sizing the modal this way requires not using ion-content. While this does mean extra styles are needed in the app, this is intentional as a dynamic height does not fit the original use case for ion-modal. Does this help answer your question?
Ok, see this as a proposal to implement a mode or another component for such modal overlays with dynamic sizes. Just an idea to extend the framework. Otherwise it's a lot of CSS hacking. Thanks to shadow parts it's possible for me to fix a lot of UI issues. Reopen if you want this. I'm fine with my solution. Btw. I found one with ion-content:
my-modal.component.css
:host,
ion-content,
ion-content::part(scroll) {
/* For modal auto height.*/
display: inline;
position: relative;
}