How to change 100% width depending on ion-select width?

Ionic Framework Ionic Angular
1

image
image534×534 11 KB

image
image552×507 10.4 KB

Result true:

image
image544×487 10.8 KB

How to change 100% width depending on ion-select width see attached image.

Can you help me?

2

Something like this is a good start for you. StackBlitz example. Sorry it’s Vue since I am a Vue guy :grin:

image
image375×253 5.71 KB

<template>
  <ion-select
    class="select-fullwidth-popover"
    aria-label="Fruit"
    interface="popover"
    placeholder="Select fruit"
    :interface-options="customPopoverOptions"
  >
    <ion-select-option value="apples">Apples</ion-select-option>
    <ion-select-option value="oranges">Oranges</ion-select-option>
    <ion-select-option value="bananas">Bananas</ion-select-option>
  </ion-select>
</template>

<style>
ion-select {
  width: 300px;
}
ion-select::part(container) {
  width: 100%;
}
</style>

<script setup>
import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
import { onMounted } from 'vue';

const customPopoverOptions = {
  size: 'cover',
};

onMounted(() => {
  const sheet = new CSSStyleSheet();
  sheet.replaceSync('.select-wrapper-inner { flex-grow: 1; }');

  document.querySelectorAll('.select-fullwidth-popover').forEach((selectEl) => {
    selectEl.shadowRoot.adoptedStyleSheets.push(sheet);
  });
});
</script>
1 Like
3

Thank you so much. But I used ionic 8

4

My example is using Ionic 8.

1 Like