Styling ion-select with popover interface

Question

I'm creating a an ion-select element with a popover interface. I would like to style the ion-select-options so that they span the width of the screen but nothing I have tried is working.

<ion-header>
  <ion-toolbar>
        <ion-buttons slot="secondary">
                <ion-button>Cancel</ion-button>
              </ion-buttons>
              <ion-title>Messages</ion-title>
              <ion-buttons slot="primary">
                    <ion-button>Blah</ion-button>
                  </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
        <ion-select interface="popover" placeholder="Select an item">
                <ion-select-option value="nes">Lorem Ipsum is simply dummy text of the</ion-select-option>          
                <ion-select-option value="n64">Nintendo64</ion-select-option>
                <ion-select-option value="ps">Blah Blah Ipsum is simply dummy text of the</ion-select-option>
                <ion-select-option value="genesis">Sega Genesis</ion-select-option>
        </ion-select>
  </ion-toolbar>
</ion-header>

I would like the select options to span the width of the screen. I'm okay with the ... if any text in the list is longer than the select-option.

Yash Jain Yash Jain · Accepted Answer · 2020-01-17T05:17:37

If you look into developer console using Inspect. You will see

ion-select has popover wrapper inside it which actually we need to style according to our requirement.

To achieve what you have mentioned.

You need to add some styles in your global.scss for popover-content

:root {
    .popover-content {
        left: 0 !important;
        width: 100%;
    }
}

You will get the following for both, ios and md.

NOTE: Do the same using media query and adjust the width so that it won't look awkward in tablets and ipads.

Styling ion-select with popover interface

3 Answers