Primeng: Item overflow in p-listbox since PrimeNG 4.2.0

Created on 14 Sep 2017  路  5Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/ZSIaYZAvJIV97T0rVAkD?p=preview

Current behavior
When I have more items than the height of a list box, the items flow out of the list box.

Expected behavior
There should be vertical scroll bars if there are too many items.

Minimal reproduction of the problem with instructions
Open the example:
http://plnkr.co/edit/ZSIaYZAvJIV97T0rVAkD?p=preview
image

  • Angular version: 2.0.X
    4.3.6

  • PrimeNG version: 2.0.X
    4.2.0

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    Chrome, latest

pending-review

Most helpful comment

Please try;

[style]="{'width':'100%'}" [listStyle]="{'max-height': '250px'}"

All 5 comments

It seems to be working at;

https://www.primefaces.org/primeng/#/listbox

The 3rd listbox has scrolling with overflow, please provide a plunkr to replicate.

Thank you, I created a plunkr example in my original post above.

Please try;

[style]="{'width':'100%'}" [listStyle]="{'max-height': '250px'}"

Thank you, it is working with listStyle now.

For anyone reading this: it only works properly if you remove the max-height from the style in addition to adding it to the listStyle. Otherwise you get this:

http://plnkr.co/edit/biiWcQnN1Maw7gA9lNPN?p=preview

It still doesn't seem like a proper solution because it prevents you from keeping your style information in your stylesheets and forces you to keep it in the template.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pchristou picture pchristou  路  3Comments

Helayxa picture Helayxa  路  3Comments

just-paja picture just-paja  路  3Comments

papiroca-tm picture papiroca-tm  路  3Comments

jisqaqov picture jisqaqov  路  3Comments