CODEWITHSUNDEEP
cssangularionic-frameworkionic4
my_overflowed_stack
my_overflowed_stack

Reputation: 604

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.

Upvotes: 9

Views: 14951

Answers (6)

drewjosh
drewjosh

Reputation: 61

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>

Upvotes: 0

Jay Douglass
Jay Douglass

Reputation: 4918

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.

Upvotes: 7

RRGT19
RRGT19

Reputation: 1677

Using CSS Shadow Parts:

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

Upvotes: 2

Reed
Reed

Reputation: 1642

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;
}

Upvotes: 4

Yash Jain
Yash Jain

Reputation: 822

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.

Upvotes: 7

Praveen Patel
Praveen Patel

Reputation: 347

You can manage this with css

.popover-content{
  width: 95%
}

Upvotes: 1

Related Questions