How to customize popover to be the same width of its ion-select

Ionic Framework ionic-v3
1

hey guys,
I’m implementing PWA concept, My problem is we need the popover of ion-select to be the same width of its parent (responsive)
our solution so far was to handle it by onClick event as below:

<ion-select (click)="onClick($event)"  
            [(ngModel)]="value" [id]="id" class="ps-select" [okText]="okText"       [cancelText]="cancelText" [multiple]="false" [interface]="popover" [placeholder]="placeHolderTrans">
                <ion-option *ngFor="let item of selectData" [value]="item.itemValue" [selected]="item.selected">
                    {{ item.description }}
                </ion-option>
            </ion-select>

ts file:

onClick(event){
    this.divwidth = event.currentTarget.offsetWidth;
    this.cssclass = document.querySelector('popover') as HTMLElement;
    console.log("sudfasu",this.divwidth) ;
  }

but the problem is when i tried to get the div with popover-content class to set its width with querySelector gets me undefined.

can anyone help me with this problem or if there 's another way to set popover width ?

1 Like