How to make ScrollPanel only visible when its inside widget is higher than it & not visible when its inside widget is shorter than it?

Question

Ok, say I have a ScrollPanel with height="500px". There is a HTMLPanel inside that ScrollPanel.

Sometimes, the HTMLPanel has more content so it will be higher than "500px", ex: 700px. The other time, the HTMLPanel has less content so it will be shorter than "500px", ex: 300px.

When the HTMLPanel is higher than 500px, there is a scrollbar appeared. That's makes sense. No Issue.

However, the problem is when the HTMLPanel is shorter than 500px (ex, 300px), no scrollbar appeared, but the ScrollPanel still shows 500px in height. So there is 200px height gap left unused, & that is a waste of space & unacceptable.

Pls see this picture

So, How to make ScrollPanel only visible when its inside widget is higher than it & not visible when its inside widget is shorter than it?

Can we fix it via Css or coding?

Answer 1

Yes you can do that. You can give a max-height to your ScrollPanel.

ScrollPanel p = new ScrollPanel();
p.getElement().getStyle().setProperty( "maxHeight", "500px" );

So when your HTML panel is 300px , the height of your scrollpanel will be 300px. When the HTML panel height is > 500px then ScrollPanel will show the scroll bar

Another way :

suppose you have a class added to ScrollPanel called .scp then the css will be

.scp
{
  max-height: 500px
}

Then Add that class to your scrollpanel

ScrollPanel p = new ScrollPanel();
p.addStyleName( "scp" );