0

I have an UI with nested HTML Panels.

Outer Panel-> <div style="height: 100%; width: 100%;">
  Inner Panel -> <div class="ap-mainPanel ap-scrollPanel">

"ap-mainPanel" is currently a place holder and is empty.

.ap-scrollPanel{
    overflow: hidden;
}

I am not able to see scrollbar on the Inner Panel. I tried adding height:101% to ap-MainPanel but it did not work. I tried specifying hardcoded height of 500px in ap-MainPanel and it showed scrollbar for some content. Do we have to work with a hardcoded value which is acceptable in most cases or are there any other ways ?

sch
  • 21
  • 5
  • 2
    why don't you use `overflow: scroll`? – Matthias Oct 07 '14 at 09:20
  • we use this in addition. .ap-scrollPanel:hover { overflow-y: auto; }. We want the scrollbar to appear on hover. But I have tried with overflow:scroll as well. But it did not work. – sch Oct 07 '14 at 09:45

2 Answers2

0

Well if the container is empty there's no height, so there's no scroll.

try this:

.ap-scrollPanel{
    height:500px
    overflow-y: scroll;
}

that make the vertical scroll bar always visible in the container.

jorgeromero
  • 297
  • 1
  • 5
0

If you haven't set height of the Inner Panel you will not able to see the scroll panel. The reason might be you are using layout panels or you are using height in percentages in the Inner Panel or its parent. Set the height of the Inner Panel in pixel or use Layout Panels through out.

Here are helpful links

What's the difference between TabPanel and TabLayoutPanel in GWT

GWT: DataGrid - set height 100% not rendering properly

Community
  • 1
  • 1
Abhijith Nagaraja
  • 3,370
  • 6
  • 27
  • 55