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

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

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 2

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 3

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

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.