Search code examples
cssangularionic-frameworkionic4

Styling ion-select with popover interface

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>

This is what that looks like:

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.

Solution

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

    Popover

    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.

    ios

    md

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