styling popup in ionic 3

Question

i have already spent good time trying to get my popover look as i desire.

the popup currently comes in the center of the screen. but i desire it to be at 50px from the top and width equal to device screen. right now the width seems to be some fix number which i am unable to change.

I don't want to do change it globally so i need it for a specific popup only. The current code to launch is:

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

the speech-popup css:

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

the popup html is:

@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;才能使用top css属性。宽度可能受弹出窗口父级的限制。试试这个：

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