Ion-select not wide enough

#1

Hi,

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.

#2

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

:grinning:

#3

I use <ion-select> :slight_smile:

#4

than just overwrite the css of ion-selcet.

#5

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

#6

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

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

and remember put this code in app.scss
:slightly_smiling_face:

#7

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!

#8

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
#9

most welcome,

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

:slightly_smiling_face:

1 Like