如何调整模态高度？

我使用设备打开模态页面时出现问题。问题在于它正在填充页面而不是弹出。可能是什么问题？该模式在网络浏览器中弹出，但它在设备上打开，但它填充了页面。我该如何解决这个问题。顺祝商祺如何调整模态高度？

import {Component} from '@angular/core'; 
import {Network, Toast} from "ionic-native"; 
import {ModalPagePage} from '../modal-page/modal-page'; 
import {NavController, Platform,ModalController} from 'ionic-angular'; 

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

    public people: Array<Object>; 
    onDevice: boolean; 


    constructor(public navCtrl: NavController, public modalCtrl: ModalController) { 


    this.platform.ready().then(() => { 

     this.onDevice = this.platform.is('cordova'); 



    }); 

    } 




    presentProfileModal() { 
    let profileModal = this.modalCtrl.create(ModalPagePage); 

    profileModal.present(); 
    } 




}

来源

2017-02-13 James Java Card

模式演示文稿是在CSS中设置的，因此如果您希望我们提供帮助，您需要粘贴相关的HTML和CSS。 – codeepic

我认为Ionic是故意这么做的，因为让模态在较小的设备上拥有整个屏幕是很好的UX。 –

@codeepic modal-page.scss是：page-modal-page { width：50％; 身高：50％; }} 模态-page.html中是： <离子标题主>我的自定义模态 <离子按钮结束> <按钮（点击）= “驳回（）”>关闭 <离子含量填充> –

.modal-wrapper { 
    position: absolute !important; 
    width: 93vw !important; 
    height: 260px !important; 
    top: 0 !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    margin: auto !important; 
} 

.modal .backdrop { 
    display: block !important; 
}

结束在variable.scss骑模式的默认CSS。

来源

2017-02-13 09:34:47 Naveen

如何调整模态高度？

回答

相关问题