2017-07-29 9 views
0

私はすでに私の欲望のように私のpopoverの外観を取得しようと楽しい時間を過ごしました。スタイリングpopup in ionic 3

現在、ポップアップが画面の中央に表示されます。デバイスの画面と同じ幅と幅から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> 
      ` 
}) 

答えて

0

はあなたが使用するposition: absolute;を持っている必要がありますトップCSS属性。幅は、ポップアップの親によって制限される可能性があります。試してみてください:

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