VerticalPanel inside ScrollPanel inside StackPanel - no scrollbars?

[Magnus]

Hi,

I want to show the contents of a log file inside a StackPanel. The log
file itself is a class "LogPanel" based on a VerticalPanel. Because
the log file grows, I added an intermediate ScrollPanel (see code
below).

The problem: The ScrollPanel never shows scrollbars. Instead, it grows
as the LogPanel grows, beyond the size of the containing StackPanel.

I would like the ScrollPanel to occupy all available space within the
StackPanel and to show scrollbars, when the inner LogPanel gets
bigger.

The demo of the StackPanel class in the GWT showcase application
assumes that there is enough room for the contents.

Can you help?

Thanks!
Magnus

-----

public class MyStackPanel extends StackPanel
{
public MyStackPanel ()
{
super ();
setSize("100%","100%"); // we are in the west edge of a
DockLayoutPanel
}

public void add (LogPanel log)
{
ScrollPanel p = new ScrollPanel ();
p.add(log);
add (p,"Log");
p.setSize ("100%","100%");
}
}

[Prashant Hegde]

The way I would go about doing this is as follows, see if this works for
you or gives any hints:

0. Make sure you are in STANDARDS mode.
1. Use StackLayoutPanel and add it to your parent LayoutPanel ( mixing
StackPanel with a DockLayoutPanel gives unpredictable results - so some
one has said & I have found out the hard way )
2. Set the width and height to 100%
3. For the container widget ( FlowPanel / HTMLPanel ) you add to the
StackLayoutPanel, put a CSS overflow: auto. This indicates that if
whatever the container contains grows beyond the container then a scroll
bar is shown. If you have a container within a container, and overflow
setting should be on the right container - just above the element whose
overflow you want to control. Firebug usually helps me figure out this.

Review the container hierarchy using Firebug to make sure that there are
no intermediate containers which makes your setting ineffective.

Hope this helps.

[Magnus]

Hi Prashant,

I have done everything you said, with some losings, but also without
success (scrollbars):

- I changed the StackPanel into a StackLayoutPanel

- then, the CSS padding (10px) has no effect anymore
(the stack is aligned directly at the left edge, without space, but
ok)

- I added overflow:auto to the inner CSS container, which is a
VerticalPanel

- but there is no scrollbar...

Why doesn't ScrollPanel work here?

Magnus

[Prashant Hegde]

Not sure abt the ScrollPanel but, I have also found out ( the hard way)
VerticalPanel ( table based ) does not work well with layout panels (div
based) .. Try using a DockLayoutPanel - with all widgets added to the
north - instead... may be worth a try.

- Prashant

On 21-07-2010 10:58, Magnus wrote:
> Hi Prashant,
>
> I have done everything you said, with some losings, but also without
> success (scrollbars):
>
> - I changed the StackPanel into a StackLayoutPanel
>
> - then, the CSS padding (10px) has no effect anymore
> (the stack is aligned directly at the left edge, without space, but
> ok)
>
> - I added overflow:auto to the inner CSS container, which is a
> VerticalPanel
>
> - but there is no scrollbar...
>
> Why doesn't ScrollPanel work here?
>
> Magnus
>
>
> On Jul 21, 5:32 am, Prashant Hegde<prashant.he...@gmail.com> wrote:
>
>> The way I would go about doing this is as follows, see if this works for
>> you or gives any hints:
>>
>> 0. Make sure you are in STANDARDS mode.
>> 1. Use StackLayoutPanel and add it to your parent LayoutPanel ( mixing
>> StackPanel with a DockLayoutPanel gives unpredictable results - so some

>> one has said& I have found out the hard way )

[Magnus]

Hi,

I've got it working now. The actual hierarchie is: DockLayoutPanel ->
StackLayoutPanel -> ScrollPanel -> VerticalPanel.

However, what is this all about with these multiple classes for one
and the same thing:
DockPanel <-> DockLayoutPanel
StackPanel <-> StackLayoutPanel
...

What's the difference, e. g. between StackPanel and StackLayoutPanel,
and when should I use which?

Thanks
Magnus

[Olivier Monaco]

Hi

You may be interested in reading http://code.google.com/intl/fr/webtoolkit/doc/latest/DevGuideUiPanels.html

Olivier

[Craig Mitchell]

I enabled scroll bars in a StackLayoutPanel using css as follows:

In the ui.xml:

<ui:style>

@external gwt-StackLayoutPanelContent;

.myStackContentStyle .gwt-StackLayoutPanelContent {

overflow: auto;

border: 1px solid #bbbbbb;

border-bottom: 0px;

background: white;

padding: 2px 2px 10px 5px;

}

</ui:style>

...

<g:StackLayoutPanel unit='PX' width="100%" height="100%" addStyleNames="{style.myStackContentStyle}">

...