Custom modal with border radius

Ionic Framework Ionic Angular
1

Hi guys,
I am making a custom modal with a border radius so i can have rounded corners. i manage to do what i want, but the modal content will automatically have a scroll.
I tried to figure it out on the css but no luck.
Any one has any ideas? Here is my code.
CSS

.message-modal {
    --height: 250px;
    --max-height: 250px;
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--ps-page-background2);    
    align-items: flex-end;
    --backdrop-opacity: 0.3;    
    --border-radius: 10px 10px 0px 0px;
}

TS

const modal = await this.modalCtrl.create({
      component: MessagePage,
      cssClass: 'message-modal'
    });

And here is the result

image
image384×675 17.6 KB

2 Likes
2

If you are using Ionic 6, you can do it like follow:

async presentModal() {
    const modal = await this.modalCtrl.create({
      component: SimpleModalPage,
      breakpoints: [0, 0.4, 1],
      initialBreakpoint: 0.4,
      cssClass: 'custom-modal' // Note this
    });
    await modal.present();
  }

src/global.scss

Example to change all…

.custom-modal {
    --backdrop-opacity: 1;
    backdrop-filter: blur(3px);

    &::part(backdrop) {
        background: #000;
    }

    &::part(handle) {
        background: var(--ion-color-primary);
        width: 150px;
        height: 6px;
    }

    &::part(content) {
        border-radius: 20px; // Here the border radius
        box-shadow: 0px 0px 20px 5px rgb(0 0 0 / 32%);
    }
}

For more information about Modal Sheet, please see:

2 Likes