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 · Accepted Answer · 2020-01-17T06:21:00.520

7

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.

edited Jan 17 '20 at 06:21

answered Jan 17 '20 at 05:17

Yash Jain

752
1
12
34

1

is there a way to do this without putting it in global? That will affect all popovers, right? What if I only want to change this particular one? – my_overflowed_stack Jan 17 '20 at 16:00
Can you please share full CSS. How you have changed the font? I want to change the font color of the popup text but it is not working if I place it in the popover-content – hardiksa Jun 09 '20 at 07:59

score 4 · Answer 2 · answered May 26 '21 at 19:37

This solution isn't completely ideal since it still requires global css scope, but its at least a bit more descriptive, reusable, and doesn't interfere with base popover functionality like the other solutions...

template.html:

<ion-select [interfaceOptions]="{ cssClass: 'popover-wide' }">

global.scss:

.popover-wide .alert-wrapper {
  width: 320px;
}

Jay Douglass · Answer 3 · 2022-06-14T04:21:06.230

4

When you use interface="popover" you can set the nested ion-popover's interface options with [interfaceOptions]="...". To display the select options at full-width use size: 'cover':

<ion-select interface="popover" [interfaceOptions]="{size: 'cover'}">
</ion-select>

See https://ionicframework.com/docs/api/popover#interfaces for more options.

edited Jun 14 '22 at 04:21

answered Jun 14 '22 at 04:15

Jay Douglass

4,828
2
27
19

score 1 · Answer 4 · answered Jan 17 '20 at 05:12

1

You can manage this with css

.popover-content{
  width: 95%
}

answered Jan 17 '20 at 05:12

Praveen Patel

349
7
24

this only works when I put it in global. is there a way to do it without putting it in global? – my_overflowed_stack Jan 17 '20 at 16:01
Yes, you can aad it to specific page css file or app.component.scss file. I checked it is working – Praveen Patel Jan 17 '20 at 16:07

score 1 · Answer 5 · answered Mar 24 '22 at 00:28

1

Using CSS Shadow Parts:

ion-popover::part(content) {
  --width: 95%;
}

answered Mar 24 '22 at 00:28

RRGT19

1,437
3
28
54

score 0 · Answer 6 · answered May 09 '23 at 15:24

The cleanest and only 100% working solution for me (ionic 6.7.3 with vuejs and TypeScript) was to set mode to "md". Hope this helps someone.

<ion-select
        :placeholder="$t('common.choose')"
        interface="popover"
        mode="md"
        v-model="patientLanguageModel"
        @ion-change="choosePatientLanguage"
        :class="{bigger: currentPatientLanguage}">
        <template
          v-for="(language, i) in languages"
          :key="i">
          <ion-select-option
            :value="language.code"
            v-if="true">
            <p>
              {{ language.name + ' – ' + language[currentAppLanguage] }}
            </p>
          </ion-select-option>
        </template>
      </ion-select>

Styling ion-select with popover interface

6 Answers6

Linked