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.

Luis Antonio Pestana
  • 993
  • 2
  • 9
  • 24
  • anyone can help me? http://stackoverflow.com/questions/43563519/how-to-load-data-in-select-item-in-ionic-2-and-know-the-selected-item – Biba Biba Apr 22 '17 at 21:47

6 Answers6

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.

Luis Antonio Pestana
  • 993
  • 2
  • 9
  • 24
  • 1
    As far as I see you don't need that `!important` because class selectors are of higher priority than element selectors. – Thomas Mar 21 '17 at 14:33
  • I agree with you, but, in this case, I won't overriding the `max-width` property, correct? – Luis Antonio Pestana Mar 21 '17 at 17:25
  • 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. – Thomas Mar 21 '17 at 18:53
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?

Uniphonic
  • 845
  • 12
  • 21
  • I think you need to remove the . from ion-select as it is an element name, not a style – dannrob Nov 06 '17 at 13:03
  • 1
    ion-select.full-width { width: 100%; max-width: 100%; } – dannrob Nov 06 '17 at 13:03
  • 1
    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. – Uniphonic Nov 06 '17 at 17:55
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%;
}
Devner
  • 6,825
  • 11
  • 63
  • 104
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 :)
}
Kishan Oza
  • 1,707
  • 1
  • 16
  • 38
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;
}
fraxool
  • 3,199
  • 4
  • 31
  • 57
0

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

Caleb Sewcharran
  • 43
  • 9