21

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.

Improve this question
1

7 Answers 7

Reset to default
33

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

As far as I see you don't need that !important because class selectors are of higher priority than element selectors.
I agree with you, but, in this case, I won't overriding the max-width property, correct?
class selectors have higher specificity than element selectors, therefore it will be overridden. Also better to specify max-width: none as you can then do: width: 110% which in this case is not really necessary but cleaner in my opinion.
14

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?

Improve this answer

3 Comments

I think you need to remove the . from ion-select as it is an element name, not a style
ion-select.full-width { width: 100%; max-width: 100%; }
I thought I recalled seeing before that ion-select was a class, as well as a tag, but when I just looked now it seemed to be only a tag, as you suggested. Thanks @dannrob , I've corrected it.
10

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%; }
Improve this answer

1 Comment

this should be the answer
2

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 :) }
Improve this answer

Comments

1

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.

enter image description here

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

Improve this answer

Comments

0

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; }
Improve this answer

Comments

0

I had to force .alert-wrapper to full width using !important.

.alert-wrapper { width: 100% !important; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.