css - ionic 3中的样式弹出窗口

Question

我已经花了很多时间试图让我的 popover 看起来像我想要的那样。

弹出窗口当前位于屏幕中央。但我希望它距离顶部 50 像素，宽度等于设备屏幕。现在宽度似乎是一些我无法改变的固定数字。

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

 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;
}