bug: List in inline modal last item is cut off

[ZachHandley]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

I have attempted to create a modal with an ion-list inside it in Vue 3.X (latest), it is supposed to show all the way to the bottom, but the content of the modal does not scroll to the last item, it is instead cut off. I have seen the other issues that were supposedly resolved, but perhaps the bug has resurfaced.

Expected Behavior

Modal scrolls the content

Steps to Reproduce

1. Create a modal with a toolbar
2. Create enough list items to overflow the parent
3. Experience bug

Code Reproduction URL

https://stackblitz.com/edit/aawkvs?file=src/components/Example.vue

Ionic Info

Ionic:

Ionic CLI : 7.0.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.0.6

Capacitor:

Capacitor CLI : 5.0.3
@capacitor/android : 5.0.3
@capacitor/core : 5.0.3
@capacitor/ios : 5.0.3

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v20.1.0 (/usr/local/Cellar/node/20.1.0/bin/node)
npm : 9.6.4
OS : macOS Unknown

Additional Information

Code reproduction is based on the example online from docs with additional elements copy + pasted

[typefox09]

I'm having the exact same issue, I noticed the problem is coming from having an ion-header inside of an ion-modal.

Can also provide minimum code example if needed.

[liamdebeasi]

Thanks for the report. The problem here is we need a single root node in order to apply an .ion-page class to. This is similar to regular Vue components where a single root node is required. Without that single root node, .ion-page cannot be applied correctly.

I'll work on updating the documentation to correct this behavior. In terms of addressing this in your applications, you can either abstract the modal content to a component, or wrap the content in .ion-page manually:

<div class="ion-page">
  ...modal content
</div>

[liamdebeasi]

Actually, this is probably something we could handle automatically inside of Ionic. I'll see if I can apply a fix for this.

[liamdebeasi]

Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/vue@7.0.7-dev.11684164923.1260bcbd @ionic/vue-router@7.0.7-dev.11684164923.1260bcbd

[typefox09]

In my case the Ion-modal was in it's own component. I can confirm that wrapping the content in an ion-page did fix the issue though. The docs should be updated.

Example:

<ion-modal>
  <ion-page>
       <ion-header>
        <ion-content>
   </ion-page>
</ion-modal>