Ionic 3 - 带圆角的模态屏幕

Question

How to round a modal screen like this link ?

My CSS code is:

.modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 25% 15%  !important;
   display: block;
   border-radius: 25px;
 }

modal.html

   <ion-content>
     <div class="subtitulo">
       <h4>Select your city</h4>
     </div>

    <ion-list>
      <button ion-item *ngFor="let cidade of cidades" (click)="selCidade(cidade)" detail-none>
        <h3 text-wrap>{{ cidade.nome }}</h3>
        <ion-icon name="ios-arrow-forward" item-right></ion-icon>
      </button>
     </ion-list>
   </ion-content>

But the border-radius have no effect. I tried some tutorials, but no one has effect.

I need some help in CSS for this case

Tks,

Answer 1

1. create a css into your css / scss file:

   .square-modal .modal-wrapper { border-radius: 0px; }

2. use the css into your model creation:

  async presentModal() {

    const modal = await this.modalCtrl.create({
      component: InvestorListPage,
      componentProps: { id: 5, name: 'gaurav' },
      cssClass: 'square-modal'
    });

    modal.onDidDismiss().then(result => {
      console.log(result.data);
    });

    return await modal.present();

  }

(tested with ionic4)

Answer 2

Just posting the solution for ionic 4:

in global.scss, just change the scss variable of the ionic component "ion-modal"

ion-modal {
  --border-radius: 8px!important;
}

Answer 3

if your page is named "modal", you can try adding border-radius: 25px; to the page-modal in the modal.scss file:

page-modal{
   border-radius: 25px;
}

it works perfect for me: example

Answer 4

You can use overflow: hidden . I hope it's will work.

Thanks