CODEWITHSUNDEEP
angularionic-frameworkmodalviewcontroller
Alexsandro agustini
Alexsandro agustini

Reputation: 21

Ionic modal height fitting content

Setting ionic modal height to auto/fit-content not working.

I'm trying to make an ionic modal on angular, have its setted according to its content. Currently i need to create the modals by a modalController, calling a custom component. If i just create them and don't pass any styles, the modal opens on the correct breakpoint i specify, however, if i swipe it to the top, it then fills the whole screen, but i want it to occupy only the height needed to fit its content. I already tried something like:

ion-modal {
 --height: auto;
}

or

ion-modal {
 --height: fit-content;
}

and some other stuff, like wrapping the modal component in ion-content, or div class="inner-content". But then the height gets kinda glitchy, and the content overflows to the bottom of the screen, instead of showing it all. Any ideas on the most recent ionic version?

public async startNewProject() {
    const modal = await this.modalController.create({
      component: NewProjectTypeComponent,
      breakpoints: [0, .50],
      initialBreakpoint: .50,
      cssClass: 'custom-border-radius-modal',
      handle: false,

    })
    modal.present();
  }

<ion-grid>
  <div class="top-bar"></div>
  <ion-row class="title-row">
    <ion-label class="main-title">Qual o tipo de projeto?</ion-label>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
        <ion-icon src="../../../../assets/icon/home-filled-icon.svg"></ion-icon>
        <ion-label>Residêncial</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
      <ion-icon src="../../../../assets/icon/industry-icon.svg"></ion-icon>
      <ion-label>Industrial</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
      <ion-icon src="../../../../assets/icon/suitcase-icon.svg"></ion-icon>
      <ion-label>Escritório</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
</ion-grid>

Upvotes: 2

Views: 2086

Answers (2)

maatien
maatien

Reputation: 61

I was able to solve this problem by adding CSS Flexbox attributes to this approach:

  public async showModal() {
    const modal = await this.modalCtrl.create({
      component: CustomComponent,
      cssClass: 'auto-height',
    });
    modal.present();
  }

global.scss:

ion-modal.auto-height {
  --height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
ion-modal.auto-height::part(content) {
  position: relative;
  display: block;
  contain: content;
}
ion-modal.auto-height .inner-content {
  max-height: 80vh;
  overflow: auto;
}

Custom component:

<ion-header>
  <ion-toolbar>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

<div class="inner-content">
  <div>[... content ...]</div>
</div>

Please note to replace <ion-content> with <div class="inner-content"> in your custom components HTML. Also, don't use the breakpoints attributes on ModalController.

Upvotes: 2

StackoverBlows
StackoverBlows

Reputation: 931

So you are using the bottomsheet modal by passing the in the breakpoints: [0, .50], initialBreakpoint: .50,

In your case what you described, it's the wrong type of modal. You need to use a regular modal by removing those 2 props and then you will get the correct modal height/width.

Upvotes: -1

Related Questions