Increase width of <ion-select>

Ionic Framework ionic-v3
1

The template:

<ion-item>
    <ion-label stacked>Select long text</ion-label>
    <ion-select>
        <ion-option value="opt1">Very very long text</ion-option>
    </ion-select>
</ion-item>

This gets cut off since the default width for appears to be quite narrow.

How do I change the width?

2

if you want the select grows with the selected text option, use:
> .my-select {
>max-width: 100%;
> }

or, if you want to define other fixed width for select, use:

.my-select {
min-width: 70%;
}

then, use the class in your select

1 Like
3

just write this in your sass file :slight_smile:

ion-select{
        max-width: 70% !important;
    }
11 Likes
5

this works on ionic 4 very good sir

1 Like
6

just in case anyone else is struggling with this, i managed to get it working by adding

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

to my global, @ikishan1 comment pointed me in the right direction, but his solution only affected the form instead of the alert where the types are shown, if anyone knows how to apply styles just for the select and not all alert will apreciate the info :slight_smile:

7 
.select-full-width {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
}

<ion-item>
  <ion-select class="select-full-width"></ion-select>
<ion-item>

Note: In some cases (generally always) you have to wrap it in ion-label.

2 Likes