Ion-select not wide enough

Ionic Framework ionic-v3
1

Hi,

What if I have select options that are too wide for the standard width of the ion-select component? I would like to widen the select popover so that the whole option is visible.

test2
test2.png600Ă—603 9.89 KB

Is there someone who has encountered this problem and have a solution?

All the best.

2

do you use <ion-select> or alertController ?
if possible paste your code

:grinning:

3

I use <ion-select> :slight_smile:

4

than just overwrite the css of ion-selcet.

5

It doesn’t work. If you have time please show a working example on stackblitz.com where you use an ion-select and make the ion-select-popover wide enough to fit longer select-options :slight_smile:

6

sorry i can’t do this i m little bit busy.
but i m sharing code here:

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

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

by this code select will open in full screen in width this is platform specific code.

or you can use common code too like this

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

and remember put this code in app.scss
:slightly_smiling_face:

2 Likes
7

You’re the hero I was waiting for :smiley: ! Do you know where these details can be found? Are there documentation somewhere of this or did you figure this one out yourself?

Either way - thank you ever so much!

8

The docs:

Also you can use the DevTools of your browser:

Read the docs and then try using the DevTools because most of the times you’ll have to be able to find these kind of things by yourself.

1 Like
9

most welcome,

i found solution by myself after you post query on forum.

:slightly_smiling_face:

1 Like
10

Is there a way to only apply it to 1 specific alert popup?

11

The best suggestion would be to target through a parent id or class.
Check this link to see how you can target that specific alert popup:
https://www.w3schools.com/cssref/css_selectors.asp

12

The alert HTML gets generated outside of the content HTML, so can’t use a CSS class selector, example:

<ion-content>
  <ion-select class="custom-class">
    ...options HTML....
  </ion-select>
</ion-content>

<ion-alert>
 ... alert HTML...
</ion-alert>
13

are you using alertcontroller?

14

I am using only HTML (ion-select).
I guess I can rather use the Alert Controller and pass in a CSS class name?

15

yes alert controller is best way but you can apply css to too

16

My alert with ion-checkbox not wide enough. My problem is similar. The alert opens, but my checkbox’s label are too wide for the default alert width. I tried to increase the alert width by “.my-custom-class” in css and used the codes you suggested. But it didn’t work. I feel lost, I’ve tried everything.

Can u help me?

17

Can you share your code snippet?

18

My TS code:

async Alertl4() {

const alert = await this.alert.create({

  cssClass: 'my-custom-class',

  header: 'Your Address',

  inputs: [

    {

      name: 'checkbox1',

      type: 'checkbox',

      label: '360 North Michigan Avenue, 403 S. State.',

      value: 'value1',

      

    },

    {

      name: 'checkbox1',

      type: 'checkbox',

      label: '435 North Michigan Avenue, Chicago.',

      value: 'value1',

      

    },

    {

      name: 'checkbox1',

      type: 'checkbox',

      label: '875 North Michigan Avenue',

      value: 'value1',

      

    },

  ]

   

});

await alert.present();

}

result in ionic serve:
example1

I tried to customize in scss with “ionic-alert”, using “.my-custom-class” and using .alert-ios .alert-wrapper in app.scss. But didn’t work.