离子 3 中的样式弹出窗口

Question

我已经花了很多时间尝试让我的弹出框看起来像我想要的那样。

弹出窗口当前位于屏幕中央。 但我希望它从顶部开始 50px，宽度等于设备屏幕。 现在宽度似乎是我无法更改的某个固定数字。

我不想全局更改它，所以我只需要它用于特定的弹出窗口。当前要启动的代码是：

let data:any;
let options = {cssClass : 'speech-popup'};
let popover = this.popoverCtrl.create(ProcessSpeechPopup, data, options);
popover.present();

语音弹出式CSS：

.speech-popup {
width: 100%;
top:68px;
}

弹出的 HTML 是：

@Component({
template: `
<div padding style="background: rgba(255, 255, 255, 0.5);height:100%;">
<h1 *ngIf="showDoYouMean == true">Do you mean?</h1>
</div>
`
})

Answer 1

你需要有一个position: absolute;才能使用顶级css属性。宽度可能受到弹出窗口父级的限制。试试这个：

.speech-popup {
position: absolute;
width: 100vw;
top:68px;
}