Ion-select not wide enough



What if I have select options that are too wide for the standard width of the ion-select component? I would like to widen the select popover so that the whole option is visible.

Is there someone who has encountered this problem and have a solution?

All the best.


do you use <ion-select> or alertController ?
if possible paste your code



I use <ion-select> :slight_smile:


than just overwrite the css of ion-selcet.


It doesn’t work. If you have time please show a working example on where you use an ion-select and make the ion-select-popover wide enough to fit longer select-options :slight_smile:


sorry i can’t do this i m little bit busy.
but i m sharing code here:

.alert-ios .alert-wrapper{
    max-width: unset !important;
    width: 100% !important;

.alert-md .alert-wrapper{
    max-width: unset !important;
    width: 100% !important;

by this code select will open in full screen in width this is platform specific code.

or you can use common code too like this

    max-width: unset !important;
    width: 100% !important;

and remember put this code in app.scss


You’re the hero I was waiting for :smiley: ! Do you know where these details can be found? Are there documentation somewhere of this or did you figure this one out yourself?

Either way - thank you ever so much!


The docs:

Also you can use the DevTools of your browser:

Read the docs and then try using the DevTools because most of the times you’ll have to be able to find these kind of things by yourself.

1 Like

most welcome,

i found solution by myself after you post query on forum.


1 Like