p-listbox: search filter textbox does not fit to width

[focosoft]

Hello,
i noticed that when i create a p-listbox with a different width the search textbox filter does not fit to the custom size.

Code is like this:

Code: Select all

<p-listbox [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'500px','max-height':'500px'}">

How can i solve?
Thanks
Max

[DarthMaul]

Hi,

It is fixed for 4.1.0 RC1

https://github.com/primefaces/primeng/issues/3077

Regards

[focosoft]

Thanks a lot!!

[mmontero]

Hello,

Working with the current version 8.0.2 I'm experiencing the same issue.
I've created a stackblitz example: https://stackblitz.com/edit/listboxexample so you can see it.

The html code is:

Code: Select all

<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px', 'width':'300px'}">
  <p-header>
    Cities
  </p-header>
</p-listbox>

Is the bug back? Am I missing something?

Thanks for your help!

[mmontero]

I found myself that I was mixing [style] and [listStyle]

As seen in the documentation, the problem is mixing the properties `[style]` and `[listStyle]`.

> - style - Inline style of the container.
> - styleClass - Style class of the container.
> - listStyle - Inline style of the list element

.

So the inline style should be splited in 2 different attributes:

Code: Select all

    <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
    [listStyle]="{'max-height':'150px'}" 
    [style]="{'width':'300px'}">
      <p-header>
        Cities
      </p-header>
    </p-listbox>