I have a component that serves as a modal. When I wrap the HTML template inside an tag, the modal’s height collapses to 0.

The code setup I’m going to share is the only content from the ionic
framework in the project

Let me go through the code setup

TestPage component Ts:

    export class TestPageComponent { 
    constructor(
      private modalController: ModalController
    ) { }
    }

TestPage component Html:

    <ion-content>
      <h1>TESTING</h1>
      <h1>TESTING</h1>
      <h1>TESTING</h1>
      <h1>TESTING</h1>
    </ion-content>

I have a service that handles the initiation of the TestPage modal using ModalController, as so:

BottomsheetHelper Service:

export class BottomsheetHelperService {

  constructor(
    private modalController: ModalController
  ) { }

  async openTestPage(): Promise<void> {

    const modal = await this.modalController.create({
      component: TestPageComponent,
      mode: 'ios',
      handle: true,
      backdropDismiss: false,
      breakpoints: [0, 1],
      initialBreakpoint: 1,
      canDismiss: true,
      focusTrap: false,
    });

    await modal.present();
  }
}

Then in a parent view I call this:

    this.bottomSheetHelperService.openTestPage();

With the tags present, when triggering the modal, the backdrop appears, but the content and modal itself are not visible.

But if I remove the tags like this:

    <!-- Commenting out ion-content -->
    <h1>TESTING</h1>
    <h1>TESTING</h1>
    <h1>TESTING</h1>
    <h1>TESTING</h1>
    <!-- Commenting out ion-content -->

The modal displays correctly:

If I explicitly define a height using viewport units to the ion-content tag, the content appears as expected:

    <ion-content style="height: 60vh">
      <h1>TESTING</h1>
      <h1>TESTING</h1>
      <h1>TESTING</h1>
      <h1>TESTING</h1>
    </ion-content>

Result:

What I have tried:

• Initially, adding viewport units to resolved the issue, but this approach is not suitable since the modal should dynamically adjust its height to fit the content rather than forcing a viewport height.

• Checked for any conflicting CSS that might be causing the collapse of ion-content, but there is nothing stated anywhere globally.

• Setting different height properties:

  ion-content {
    height: 100%;
    height: auto;
    --height: 100%;
    --height: auto;
  }

From what I understand, the Ionic framework is designed to handle height automatically, without the need for manual adjustments or “hacks”. But then why does the content collapse in this case, and the only way to display the content is by explicitly setting a viewport height.

I hope anyone can come with some insight to this problem.

Thanks