9

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.

Improve this question

6 Answers 6

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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?
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
7

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.

Improve this answer

Comments

4

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; }
Improve this answer

Comments

2

Using CSS Shadow Parts:

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

1 Comment

This is the correct answer. In order to be specific to a popover, add a css class using [interfaceOptions]="{cssClass: 'myPopover'} And then the proper selector is ion-popover.myPopover::part(content)
1

You can manage this with css

.popover-content{ width: 95% }
Improve this answer

2 Comments

this only works when I put it in global. is there a way to do it without putting it in global?
Yes, you can aad it to specific page css file or app.component.scss file. I checked it is working
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.