TabPanel - 100% height for client widget?

46 views
Skip to first unread message

Magnus

unread,
Jun 26, 2010, 10:08:04 AM6/26/10
to Google Web Toolkit
Hello,

I would like my TabPanel to let its tab clients occupy the whole
available vertical space.

The TabPanel itself is located as I want it to be.

But the single tab pages always reside at the top of the client area.
But I would like to have them centered vertically.

Can you help?

I tried the following:

TabPanel pnl = new TabPanel ();
pnl.setSize ("100%","100%");
pnl.setAnimationEnabled(false);

VerticalPanel p = new VerticalPanel ();
p.setSize ("100%","100%");
HTML txt1 = new HTML("This isa Text 1.");
p.add (txt1);
pnl.add (p,"Home 1");

HTML txt2 = new HTML("This is Text 2.");
pnl.add (txt2,"Home 2");

Thanks
Magnus

Nian Zhang

unread,
Jun 27, 2010, 9:39:19 PM6/27/10
to Google Web Toolkit
I think you need call pnl .setHeight(Window.getClientHeight()) method.

Stefan Bachert

unread,
Jun 28, 2010, 2:02:14 PM6/28/10
to Google Web Toolkit
Hi,

this does set height to the height of the browser window when
starting. But the height did not change when browser window changes


Stefan Bachert
http://gwtworld.de

Magnus

unread,
Jul 3, 2010, 9:39:43 AM7/3/10
to Google Web Toolkit
In addition, it would set the wrong height! The height of the TabPanel
(pnl) is ok, it covers 100 % of the available space.
But the VerticalPanel p that I add as the client panel to one of the
tab pages is not affected.

Look at this screenshot:
http://yfrog.com/4rtabpanelp

The TabPanel (red border) is ok. But its child panel (blue border) is
crunched at the top.

How can I get the blue border maximized to the red border?

Thanks
Magnus

aditya sanas

unread,
Jul 3, 2010, 12:43:49 PM7/3/10
to google-we...@googlegroups.com
I think for that you will require to set its border explicitly.
that will settle this issue.
you can add a dummy panel on tab home1 or home2 and set its height 
but here  if you set height using % then it will not work you will have to set height in pixels or any other like em...

i hope this will work.

--
Aditya



--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Magnus

unread,
Jul 3, 2010, 6:24:08 PM7/3/10
to Google Web Toolkit
Thanks! I tried with "dummy panels", VerticalPanel and SimplePanel. I
tried absolute and relative sizes but nothing seems to have an effect.

private void init ()
{
TabPanel pnl = new TabPanel ();
pnl.setSize ("100%","100%");
//pnl.setHeight ("100px");

SimplePanel p = new SimplePanel ();
p.setPixelSize (100,200);
HTML txt1 = new HTML("This isa Text 1.");
p.add (txt1);
// txt1.setPixelSize (200,200);
pnl.add (p,"Home 1");

HTML txt2 = new HTML("This is Text 2.");
pnl.add (txt2,"Home 2");
}

Magnus

On Jul 3, 6:43 pm, aditya sanas <007aditya.b...@gmail.com> wrote:
> I think for that you will require to set its border explicitly.
> that will settle this issue.
> you can add a dummy panel on tab home1 or home2 and set its height
> but here  if you set height using % then it will not work you will have to
> set height in pixels or any other like em...
>
> i hope this will work.
>
> --
> Aditya
>
> On Sat, Jul 3, 2010 at 7:09 PM, Magnus <alpineblas...@googlemail.com> wrote:
> > In addition, it would set the wrong height! The height of the TabPanel
> > (pnl) is ok, it covers 100 % of the available space.
> > But the VerticalPanel p that I add as the client panel to one of the
> > tab pages is not affected.
>
> > Look at this screenshot:
> >http://yfrog.com/4rtabpanelp
>
> > The TabPanel (red border) is ok. But its child panel (blue border) is
> > crunched at the top.
>
> > How can I get the blue border maximized to the red border?
>
> > Thanks
> > Magnus
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to google-we...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .

Magnus

unread,
Jul 11, 2010, 1:52:33 PM7/11/10
to Google Web Toolkit
Hi,

sorry for repeating and posting in this thread without solution, but I
must say that TabLayoutPanel is useless for me if its size cannot be
maximized.

So I'll have to build my own TabPanel, but this is not satisfactory
since a framework should prevent me from building my own versions of
things that should be already available.

I cannot understand why TabLayoutPanel insists on having its content
area squeezed at the top...

Magnus

DaveC

unread,
Jul 12, 2010, 4:34:02 AM7/12/10
to Google Web Toolkit
Have you tried using CSS?

.my-tab-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

this *should* work as long as it's parent is positioned (relative/
absolute)...

The new layout panels I think require a RootLayoutPanel not a
RootPanel... but I can't remember exactly.

Cheers,
Dave

Magnus

unread,
Jul 18, 2010, 1:01:34 AM7/18/10
to Google Web Toolkit
Hi,

this makes the size of the content equal to the size of the whole tab
panel. The result is that the content is drawn over the tabs at the
top.

But with this method one can influence the size at all. Can't we
modify your CSS somehow?

There must be a solution, or am I the only one who does not like the
contents to be squeezed at the top?

Thanks
Magnus

On Jul 12, 10:34 am, DaveC <david.andrew.chap...@googlemail.com>
wrote:
Reply all
Reply to author
Forward
0 new messages