How to set ion-select component with 100% width in IONIC 2 - ionic2

Question

I would like to set my ion-select with 100% of width.
I have tried with css class like this:
.mySelect { width: 100% !important; }
But it is not working.

Answer 1

I did it.
For someone who wants the solution, here is the code:
.myCustomSelect{
max-width: 100% !important;
}
You must have to override the 'max-width' css property.

Answer 2

Increasing the specificity of the selector allows for doing it without the !important on it:
ion-select.myCustomSelect{
width: 100%;
max-width: 100%;
}
Which makes it a bit cleaner, since !important should be used as sparingly as possible, as noted in the Stack Overflow article here:
Should I avoid using !important in CSS?

Answer 3

You don't need !important at all! Ionic has specified a min-width of 45% (or whatever as per your version of ionic). All you have to do is over-ride it with a max-width of 100%. At the same time, the select, being an inline element, will only expand to fit its contents. So it won't fill the whole width. So to make this happen, you simply add width: 100% to it. So your final CSS class may look something like this:
.full-width-select {
width: 100%;
max-width: 100%;
}

Answer 4

I try the each solutions but found a perfect way to do this :)
just modify your sass file by adding this
ion-select{
max-width: 70% !important;// your choice :)
}

Answer 5

The answer from Luis Antonio Pestana is good if you associate it with the code of his initial question. So to be more clear, the complete code to get the ion-select to take 100% of its container is :
.your_ion_select {
max-width: 100% !important;
width: 100% !important;
}

Answer 6

This is what helped me. After perusing multiple articles, I've found in this stack overflow article ~ Styling ion-select with popover interface, that if you open the developer tools and use the inspect tool, you can see the class that directly affects the select option.
So now that we know that the classes are .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md we can then add adjust this in our global.scss file
Like so
:root{
.alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md{
max-width: 100% !important;
width: 100% !important;
}
I'm currently working with Ionicv4 and above, however I'm assuming this should still be of assistance