Scrolling panel with full size

General
1

Hello,

I’m using a common page layout with a header and footer, which are both always visible, and a scrollable content, all set in one VerticalLayout which has full size. The header and the footer have fixed heights and the content area expands to fit the rest of the browser window. The problem is that I want the content area to be scrollable but cannot achieve that without making it a fixed-height Panel. When setting the Panel to full size, it no longer shows scrollbars (I’m only interested in vertical one though).

How can I achieve what I want? I used to use GWT and it had the ScrollPanel which would decorate any content with scrollbars. I thought the Panel would behave similarly but it doesn’t. How can I set the content area scrollable and full size at the same time?

Thanks in advance!

2

Setting the Panel to full size should provide scrollbars when necessary, as long as the layout inside the Panel is not 100% high (i.e. is either a fixed pixel size of undefined high). If the layout is 100% high, it will clip any overflowing content, and the Panel has nothing to scroll to.

3

Thank you, I finally found it! I was sure I didn’t have a 100% high layout within the panel I wanted to scroll, but your post made me re-analyze the layouts and I discovered I had the panel within another layout which had undefined size. That probably happened accidentaly when playing with the sizes.

Now it works, bless You and the debug mode!

4


Jouni
, I am looking for possibility to have
AbstractLayout
 inside the scrollable
Panel
. Unfortunately, I don’t know the height of
AbstractLayout
 in advance, so I would like it to grow for infinity and
Panel
 to have scrolls and height = the height of the browser window. If I call
AbstractLayout.setSizeUndefined()
 that does not help. How this is possible?

5 
panel.setSizeFull();
layout.setSizeUndefined();
panel.setContent(layout);

That should be enough to get scrollbars. If it is not then there is something else interfering. Can you share screenshots and code so that it would be easier toi point out what is wrong.

6

The code is the following:

AbsoluteLayout rootLayout = new AbsoluteLayout();

rootLayout.addComponent(textLayout);
rootLayout.setSizeUndefined();
//rootLayout.setHeight("4000px");

CustomLayout textLayout = new CustomLayout((String) null);

textLayout.setTemplateContents(sb.toString());
textLayout.setSizeUndefined();

Panel panel = new Panel();

panel.setContent(rootLayout);
panel.setSizeFull();
panel.setScrollable(true);

Tab searchResultTab = tabSheet.addTab(panel, "EP0930075A1 text", null);

The result is attached. If I uncomment the explicit
rootLayout.setHeight(“4000px”);
 above, then I can see the contents (truncated at this height).
11782.png

7

IIRC, AbsoluteLayout doesn’t support undefined height.

8

Yeah, I think that’s the same if you do it in plain html as well - something with position:absolute doesn’t reserve any space. Do you actually need the absolute layout, or could you use something else like VerticalLayout, GridLayout or CssLayout?

9


Henri
,
Jens
, thank you for reply.

I need “AbsoluteLayouting” features on the top of plain HTML (as shown on attachments in
this post
). If I fix the height of
AbsoluteLayout
 (for example, I can get the main window height by registering
Window.ResizeListener
), then there is no scrolling on the Panel. Is there any way to render the contents completely?

Note that I add
CustomLayout
 to
AbsoluteLayout
 without absolute positioning (that is visible from HTML). What prevents
AbsoluteLayout
 to calculate the height correctly in this case? Currently the layout is:

+ Panel
  + AbstractLayout
    + CustomLayout
      + pure HTML

and I am trying to guess, which combination works better…

10

Is the AbsoluteLayout there just to put the popup in the right position. surely there must be other ways to do that as well. A lot of addons have popups without the need of absolute layouts.

One option might also be to not have the CustomLayout inside the AbsoluteLayout, but on the side. This way CustomLayout can provide it’s height to Panel when the AbsoluteLayout is not in between.

+ Panel
  + AbstractLayout
  + CustomLayout
    + pure HTML
11

Thanks for the hint. I am not sure, if
AbsoluteLayout
 will handle this (I suppose, it will try to layout the components relative to its top-left corner).

I have tried two possibilities:

One is to put the
CustomLayout
 and
AbsoluteLayout
 next to each other to
Panel
 (=
this
 in examples):

CustomLayout textLayout = new CustomLayout((String) null);
AbsoluteLayout rootLayout = new AbsoluteLayout();

textLayout.setTemplateContents(sb.toString());
textLayout.setSizeUndefined();

addComponent(textLayout);
addComponent(rootLayout);

setSizeFull();
setScrollable(true);

or to replace
VerticalLayout
 with
CustomLayout
 and to put
AbsoluteLayout
 into it:

textLayout.setTemplateContents(sb.toString());
textLayout.setSizeUndefined();

textLayout.addComponent(rootLayout);

setContent(textLayout);
setSizeFull();
setScrollable(true);

In both cases I have the contents of the
CustomLayout
 cut off and no scrolling. I attach the layout for the last case – perhaps it helps.
11787.png

12

Hmm. Hard to say what is wrong. Seems okay, but the CustomLayout still gets the inline height, as you can notice in firebug. I can’t really come up with any other suggestions than to check that there is no accidental rootLayout.setSizeFull(); or panel.getContent.setSizeFull() later on, after that code snippet.

Other things you could try is is calling inside the panel constructor setContent(rootLayout). I would try that without using the absolute layout first, and when you get scrolling to work, you would add the absolute layout back (maybe into the customlayout)

I haven’t used CustomLayout that much so I’m not sure or its capabilities / restrictions.

13

Indeed I was doing
panel.getContent().setHeight()
 in the event handler while I really meant
panel.setHeight()
. Thanks for the hint!

14


Jens
, after paying with layouts it turned out, that if
AbsoluteLayout
 is zero px height, it does not generate mouse click events. Thanks to
Royce Ausburn
 that we have wonderful

ClickableCustomLayout

, that allows to to capture mouse events. Fired
bug#7321
.

15

How about wrapping the TabSheet inside an AbsoluteLayout instead of the other way around? Something like:


        final AbsoluteLayout rootLayout = new AbsoluteLayout();
        setMainWindow(new Window("", rootLayout));

        CustomLayout textLayout = new CustomLayout((String) null);

        TabSheet ts = new TabSheet();
        ts.addTab(textLayout, "EP0930075A1 text", null);

        ts.setSizeFull();
        rootLayout.addComponent(ts);