ScrollPanel has incorrect height setting in .ui-scrollpanel-content.

[Nierrrrrrr]

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

[x] bug report
[ ] feature request
[ ] support request

Plunkr Case (Bug Reports)
Just go to the demo page of primeng for ScrollPanel
https://www.primefaces.org/primeng/#/scrollpanel

Current behavior
Wrong height calculate for ui-scrollpanel-content class when use the default settings.
If you don't overwrite any CSS properties when using ScrollPanel, the content height will be hidden by 18px.
The first demo don't overwrite any CSS properties and the bottom 18px of content is hidden. (The text is visible because whole content has padding: 1em;. If you remove the padding the last line of text will be truncated.)
The last demo which overwrites CSS properties to show the x-axis scrollbar doesn't suffer from this bug.

Expected behavior
Currently I'm overwriting the default CSS properties to set height from calc(100%+18px) to 100%, but it should work just fine without any overwrites to make the default settings work.

Please tell us about your environment:

• Angular version: 5.2.9

• PrimeNG version: 5.2.3

• Browser: Chrome 65.0.3325.162

[dwegzero]

And width...

.ui-scrollpanel-content {
    height: 100%;
    width: 100%;
}

does it for now.

[mertsincan]

Could you please try the following css code?

 .ui-scrollpanel-content {
   padding: 0px 18px 18px 0px; 
}

[dwegzero]

Works too.

[chrisschauer]

Hi @mertsincan,

sorry for commenting on an already closed issue, but i don't think it's fixed.

The demo pages cut's the content by 18px, but only on Firefox.
https://www.primefaces.org/primeng/#/scrollpanel

Firefox: 86.0.1

Can somebody confirm, the issue still exists on firefox?

[nchaigne]

I had this issue also (primeng@17.16.0).
I had to apply the workaround discussed here to have a correct display.