# Increase width of \<ion-select\>

**URL:** <https://forum.ionicframework.com/t/increase-width-of-ion-select/76794>\
**Category:** ionic-v3\
**Created:** [January 20, 2017, 2:20am UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794 "2017-01-20T02:20:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![muhd\_murtaza](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@muhd\_murtaza](https://forum.ionicframework.com/u/muhd_murtaza)\
**Post date:** [January 20, 2017, 2:20am UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/1 "2017-01-20T02:20:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Anenha](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@Anenha](https://forum.ionicframework.com/u/Anenha)\
**Post date:** [March 25, 2017, 8:50pm UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/2 "2017-03-25T20:50:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ikishan1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ikishan1/32/113896_2.png) [@ikishan1](https://forum.ionicframework.com/u/ikishan1)\
**Post date:** [January 2, 2018, 12:24pm UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/3 "2018-01-02T12:24:19Z")

</div>

just write this in your sass file 🙂

```auto
ion-select{
        max-width: 70% !important;
    }

```

---

<div class="post-metadata">

**Author:** ![ebustillo](https://avatars.discourse-cdn.com/v4/letter/e/ee59a6/32.png) [@ebustillo](https://forum.ionicframework.com/u/ebustillo)\
**Post date:** [August 20, 2019, 9:31pm UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/5 "2019-08-20T21:31:56Z")

</div>

this works on ionic 4 very good sir

---

<div class="post-metadata">

**Author:** ![camitrotalo](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@camitrotalo](https://forum.ionicframework.com/u/camitrotalo)\
**Post date:** [November 13, 2019, 3:39pm UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/6 "2019-11-13T15:39:58Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Dovel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dovel/32/127722_2.png) [@Dovel](https://forum.ionicframework.com/u/Dovel)\
**Post date:** [February 3, 2020, 1:49pm UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/7 "2020-02-03T13:49:32Z")

</div>

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

```

```auto
<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`.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:01pm UTC](https://forum.ionicframework.com/t/increase-width-of-ion-select/76794/8 "2021-07-19T21:01:47Z")

</div>