CODEWITHSUNDEEP
cssangularionic3ionic-popover
Vik
Vik

Reputation: 9289

styling popup in ionic 3

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>
            `
})

Upvotes: 0

Views: 988

Answers (1)

SimplyComplexable
SimplyComplexable

Reputation: 1114

You need to have a position: absolute; to use the top css attribute. The width is likely being limited by the pop-ups parent. Try this:

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

Upvotes: 0

Related Questions