Ion-Modal problem: content is truncated

Ionic Framework Ionic Vue
1

hello,
I found a problem in the ion-modal. The Ion-modal does not show all content with an ion-header and it is not possible to scroll to the bottom of the page.

Adjusted example

Link Ionic Docs:

Screenshot:

659Ă—800 133 KB

Does anyone know a solution for this?

2

Hi Steve,

Adding the :keepContentsMounted="true" property should be able to resolve the problem.

Here is the detailed documentation about keepContentsMounted property:

3

You should mention there’s a button at the bottom of the page that doesn’t display.

That does look like a modal bug, so you should log an issue: Issues · ionic-team/ionic-framework · GitHub

Add this hack to fix it:

<style scoped>
 ion-modal ion-content {
   height: calc(100% - 40px) !important;
 }
</style>
4

thx @jonz94
I’m using the :keepContentsMounted=“true” now.

Actually, I’m just loading text and a few input-elements, so normally this shouldn’t be needed.

thx @dolthead
I also think this is a bug.

1 Like