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

0
votes

I have a problem with ion-select component which is the width of it's popover items. it doesn't match the size of it's parent ion-select.

I tried to fix this issue by using onclick event as below:

[(ngModel)]="value" [id]="id" class="ps-select" [okText]="okText" [cancelText]="cancelText" [multiple]="false" [interface]="popover" [placeholder]="placeHolderTrans"> {{ item.description }}

ts file:

onClick(event){ this.divwidth = event.srcElement.clientWidth; this.cssclass = document.querySelector('.popover-content') as HTMLElement; console.log("sudfasu",this.divwidth) ; this.cssclass.style.width = this.divwidth; }

but when I try to catch the div with class "popover-content" I always got an error of 'Cannot read property 'style' of null'

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

1
angulartypescriptionic3

1 Answers

0
votes

i managed to assign popover width by using Css variables, defined it in app.scss and assigned them in my ts file

in app.scss

:popwidth { --width: 0px; }

[dir="ltr"] .select-popover .popover-content{ width: var(--width); }

file.ts

onClick(event){
this.divwidth = event.srcElement.clientWidth; let popwidth = document.documentElement; popwidth.style.setProperty('--width', this.divwidth + "px"); }