Zoom destroys dropdown

[haticenuragba]

Hi,
I am developing a web application that supposed to work properly with at least 80% zoom ratio. I am using primeNG components and most of them works fine even if I zoom the page. However, p-dropdown is being destroyed by zoom even in 80% ratio.
Here is my code;

Code: Select all

     <div class="ui-inputgroup my-4">
    <p-dropdown id="evrakTuru" placeholder="Evrak Türü"></p-dropdown>
          </div>

And this is how dropdown looks like with 80% zoom.



I didn't change anything in css.
I don't know if it can be considered as a bug, maybe I am doing something wrong but any kind of help would be appreciated.
Thanks

[arvindver]

Apologies for delay in response, as i just joined the forum.
A few days ago , I also faced this problem . The dropdown was misbehaving when the screen height was small. May be because the items inside the dropdown takes some height and when there are more items the dropdown items height goes to 200+ px. The fix was to reduce the max-height attribute of p-dropdown-items css class .
Here is what i configured in my components .css file.

:host ::ng-deep .p-dropdown-items {
max-height: 150px!important;
}

:host ::ng-deep .p-dropdown-panel .p-dropdown-items{
max-height: 150px!important;
}