Skip to content

bug: ion-modal doesn't show content with auto height #31149

@tdekoning

Description

@tdekoning

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

The ion-modal component will receive a 0 height when using --height: auto; and ion-content inside of it.
Using this css property this way is described here.

Expected Behavior

I expect the ion-modal to use the height of the ion-content and provide the same scroll features as using without --height: auto;

Steps to Reproduce

See the stackblitz url.

  1. Click on the "Open sheet modal" button
  2. See that the overlay is shown, but no modal

Remove the --height: auto; property from the css of Example.vue and repeat the above steps to see the modal.

Code Reproduction URL

https://stackblitz.com/edit/izy9qxqz?file=src%2Fcomponents%2FExample.vue

Ionic Info

"@ionic/vue": "8.8.7",
"@ionic/vue-router": "8.8.7",

Additional Information

So the ion-modal works with --height: auto; if there is no ion-content component inside of it. However, ion-content is something that should fix a lot of scrolling issues in the modal.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions