Ion-select interface="popover" width enlarge

Ionic Framework ionic-v3
1

How can I eliminate these ellipsis (style=" max-width: 100% !important; width: 100% !important;" on the ion-select or ion-option tag doesn’t help):

image

2

Inspect the element and look at the css. Somewhere is specifies that overlapping text should be “elipsified”. Overwrite that value.

3

I know this is like two years late…

// In your html/template - Note that the object here can be defined as a public item on your component script also
<ion-select [selectOptions]="{'cssClass': 'wider-popover'}"...
   <ion-option...
-------------------------------------

// In appropriate css
.wider-popover .popover-content {
   width: 100%; //or w/e width
}

The select will propogate that class to all necessary children, thus allowing .popover-content’s width to be set with a little more specificity.

Cheers

5 Likes
4

Thanks to @pvielhaber, here is Ionic 5 solution:

// html:
<ion-select interface="popover" [interfaceOptions]="{'cssClass': 'mycomponent-wider-popover'}">

// scss:
::ng-deep .mycomponent-wider-popover
{
  --width: 95%;
  --max-width: 400px;
}
1 Like