如何在onic2中调整模式页面的大小

时间:2017-08-23 15:30:08

标签: ionic-framework ionic2

我是离子的新手并试图创造一个简单的模态。它工作正常,但我无法调整大小,即使内容部分使用低于css调整大小但b / g阴影仍然存在。有人可以帮助我吗?

 ion-content.content {
    top: 15%;
    left: 15%;

    width: 70%;
    height: 70%;
}

enter image description here 我的modal.html

<ion-content padding class="sample-modal-page no-scroll">
   <h3 style="text-align:center"><strong>Are you sure you want to sign out?</strong></h3>  
  <button ion-button (click)="logout()">Logout</button>
    <button ion-button (click)="closeModal()">Cancel</button>
</ion-content>

modal.ts

    import { Component } from '@angular/core';
import { ViewController, NavController} from 'ionic-angular';



@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class ModalPage  {

  constructor(public navCtrl: NavController,
    public viewCtrl : ViewController) {
  }

  ionViewDidLoad() {

  }

  public closeModal() {
    this.viewCtrl.dismiss();
  }

  public logout() {

  }
}

1 个答案:

答案 0 :(得分:0)

HTML中的

page-modal{
    ion-card-content {
                padding: 0px !important;
                height: 60% !important;
                position: absolute;
                top: 20%;
                left: 18%;
                display: block;
                width: 65%; // here change your width
                height: 65%!important; // here change your width
                overflow: hidden;
                ion-content {
                    height: 100%;
                    width: 100%;
    }
    }
}

在scss中

{{1}}