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

UI Components for Angular
Post Reply
focosoft
Posts: 15
Joined: 13 Jun 2017, 00:57

13 Jun 2017, 11:06

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


focosoft
Posts: 15
Joined: 13 Jun 2017, 00:57

13 Jun 2017, 17:01

Thanks a lot!!

mmontero
Posts: 2
Joined: 12 Aug 2019, 10:38

12 Aug 2019, 10:48

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
Posts: 2
Joined: 12 Aug 2019, 10:38

19 Aug 2019, 11:00

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>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests