I would like to adjust my popover width and height. However from the ionic framework it shows for example, “$popover-md-min-width” how do I use it? As I pasted in the scss file it’s not working. Thankyou.
1 Like
in your project theme folder in variables.scss paste ur variable and give it a value. it should be something like this
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
$popover-md-min-width: 100px;
1 Like
But I would like it to soley appear on a page and not affect all app
-> But I would like it to soley appear on a page and not affect all app
Then you can’t use a ‘shared variable’.
2 Likes
then i think the best way is to give your page an id… and in the page .scss file style it as you like
for example lets think this is your component html:
<ion-content id="myPage" >
<ion-header>
<ion-navbar>
<ion-title color="light">your navbar title!</ion-title>
</ion-navbar>
</ion-header>
.
.
.
</ion-content>
then style everything that you want in the .scss file with css selectors as below:
#myPage myElement{
some style;
}
this way not only it applies only to this page… but also it wont get overwritten by ionic default styles.
1 Like
thaankyou guys for all the help much clearer now thankyou.
1 Like
Use the page’s selector so any styles only apply to that page:
@IonicPage()
@Component({
selector: 'page-introduction',
templateUrl: 'introduction.html'
})
And:
page-introduction {
.swiper-pagination-bullet-active {
background: white;
}
}
See: https://github.com/Robinyo/big-top/tree/master/src/pages/introduction
4 Likes