Change font size on a popover select box

Ionic Framework ionic-v3
1

I am going round in circles trying to amend the font-size on a ion-select popup - can’t seem to get down to the level at which the text is displayed.

The popup display is only 200px wide and will only display 17 characters - I would really like to reduce the size of the font.

Screen of display:
image

Entry “Countries: America” gets reduced to “Countries: Amer…”

2

Hi
Did you ever solve this?

Regards

3

I can’t remember, but I think I just gave up trying to amend the css and instead I just made sure the text did not exceed 16 characters. Sometimes it is easier and better to accept the default design layout rather than producing your own.

4

Ha-ha – I know the feeling. Thanks for the prompt response.

5

I know your question is pretty old, but as I searched the entire internet for a solution to this problem. I only found your post. I ended up figuring out the following solution by myself, cause there were no documentations. Maybe someone has a better solution, but for now my solution was :

html:

<ion-select interface=“popover” [interfaceOptions]=“{cssClass: ‘InputPopoverSize’}” formControlName=“type” label=“Inputtype” label-placement=“stacked”>

                  <ion-select-option *value*="string">Text</ion-select-option>

                  <ion-select-option *value*="number">Number</ion-select-option>

                  <ion-select-option *value*="boolean">Toggle</ion-select-option>

                </ion-select>

global.scss (its important to use that global.scss):

//I also wanted to change the width for my needs

ion-popover.InputPopoverSize::part(content){

width: 180px;

}

//than I changed the font-size
//for ios you might also want to target the specific ios-class (but I didn’t for now)

.InputPopoverSize{

ion-select-popover .sc-ion-select-popover-md {

 font-size: 0.9rem ;

}

}