TabLayoutPanel Dynamic Resizing

[Ash]

Can some one tell me why the TabLayoutPanel won't resize in the
following code.

TabLayoutPanel p = new TabLayoutPanel(30, Unit.PX);

VerticalPanel vp = new VerticalPanel();

// int array[] = new int [100];
for (int i = 0; i < 100; i++) {
TextArea ta = new TextArea();
ta.setText(Integer.toString(i));
vp.add(ta);

}

p.add(vp, "New Tab");

// Attach the LayoutPanel to the RootLayoutPanel. The latter will
listen for
// resize events on the window to ensure that its children are
informed of
// possible size changes.

RootLayoutPanel rp = RootLayoutPanel.get();
rp.add(p);

[Ashwin Desikan]

you have only provided the height of the tab bar which is 30 px. You
also have to set the height of the tabpael content. Set it to 100%

~Ashwin

[Ash]

p.setHeight("100%");

Setting the height of TabLayoutPanel to 100% as above doesn't work
either.

Ash

> >            rp.add(p);- Hide quoted text -
>
> - Show quoted text -

[Ashwin Desikan]

you can override the height of the content panel in CSS. if you are not
using styles, you have to additionally set the height of the Vertical
Panel you are adding inside your TabLayoutPanel.

~Ashwin

[Ash]

i tried setting the height of verticalpanel to 100% and also in px but
both didn't work.
Could be something wrong with my code.

> >> - Show quoted text -- Hide quoted text -

[Ashwin Desikan]

try setting absolute height and check if the position shows as absolute
using "Inspect Element" or firebug. You can use them also to change the
height of the TabLayoutPanelContent Style, see if that makes your panel
to appear.

I think its mostly due to your vertical panel, its not getting resized
most probably. try the above option and see if the panel appears. Then
we can try out other options

~Ashwin

[Ashwani Gupta]

Finally got a chance to work on this.

 

I tried inspecting the Element using IE 9 (using F12 Developer Tools). Almost all my elements have position = absolute. I tried setting the TabLayoutPanelContent height to 100% but nothing happend.

 

Its not that nothing is visible I have been seeing textarea vertically aligned but then I can only see the first 12 of them and no way to see the rest of them, so what I am expecting is that if TabLayoutPanel resizes the scroll bar should appear so I can scroll down to all my text areas.

 

--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Ashwin Desikan]

can you provide a screen shot? would give a clear picture of the issue.

~Ashwin

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.

--
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.

[Ashwani Gupta]

Here is the screen shot where I have 100 textareas but only 12 display and no scrollbar appears on the window.

[Paul Stockley]

You need a ScrollPanel as the first child of the tab. You may also need to set the width and height on this panel to 100%

[Ashwin Desikan]

you can add a scroll panel or use one of the layoutpanel's like a
ResizeLayoutPanel, set it 100% height and also the additional style of
Overflow : auto

this would make it to scroll automatically when the height of the
tabpanel changes

~Ashwin

On Tuesday 22 November 2011 02:43:28 AM IST, Paul Stockley wrote:
> You need a ScrollPanel as the first child of the tab. You may also
> need to set the width and height on this panel to 100%
>

> --
> You received this message because you are subscribed to the Google
> Groups "Google Web Toolkit" group.

> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/zmz3phOOuHcJ.

[Ashwani Gupta]

The ScrollPanel option and ResizeLayoutPanel with Overflow = auto both works fine.

Based on the screen shot i have attached i want to know why do i see two scroll bars.

There should have been only one scroll bar.

 

And on the other note why is there a need to add Scroll Panel or ResizeLayoutPanel.

I thought that on resize the TabLayoutPanel will auto resize itself without the need of adding a child Scroll Panel or ResizeLayoutPanel.

 

On Mon, Nov 21, 2011 at 10:02 PM, Ashwin Desikan <ashwin....@gmail.com> wrote:

you can add a scroll panel or use one of the layoutpanel's  like a ResizeLayoutPanel, set it 100% height and also the additional style of Overflow : auto

this would make it to scroll automatically when the height of the tabpanel changes

~Ashwin

On Tuesday 22 November 2011 02:43:28 AM IST, Paul Stockley wrote:

You need a ScrollPanel as the first child of the tab. You may also need to set the width and height on this panel to 100%

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/zmz3phOOuHcJ.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

[Patrick Tucker]

The tablayoutpanel should not go bigger than the browser window.

Instead of overflow try overflow-y. I think you are able to apply
that to the container element and skip the extra widget.

You should look at the W3 schools CSS tutorials...

On Nov 24 2011, 1:21 am, Ashwani Gupta <ashwani...@gmail.com> wrote:
> The ScrollPanel option and ResizeLayoutPanel with Overflow = auto both
> works fine.
> Based on the screen shot i have attached i want to know why do i see two
> scroll bars.
> There should have been only one scroll bar.
>
> And on the other note why is there a need to add Scroll Panel or
> ResizeLayoutPanel.
> I thought that on resize the TabLayoutPanel will auto resize itself without
> the need of adding a child Scroll Panel or ResizeLayoutPanel.
>
> On Mon, Nov 21, 2011 at 10:02 PM, Ashwin Desikan

> <ashwin.desi...@gmail.com>wrote:

>
>
>
> > you can add a scroll panel or use one of the layoutpanel's  like a
> > ResizeLayoutPanel, set it 100% height and also the additional style of
> > Overflow : auto
>
> > this would make it to scroll automatically when the height of the tabpanel
> > changes
>
> > ~Ashwin
>
> > On Tuesday 22 November 2011 02:43:28 AM IST, Paul Stockley wrote:
>
> >> You need a ScrollPanel as the first child of the tab. You may also need
> >> to set the width and height on this panel to 100%
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "Google Web Toolkit" group.

> >> To view this discussion on the web visithttps://groups.google.com/d/**
> >> msg/google-web-toolkit/-/**zmz3phOOuHcJ<https://groups.google.com/d/msg/google-web-toolkit/-/zmz3phOOuHcJ>
> >> .
> >> To post to this group, send email to google-web-toolkit@**
> >> googlegroups.com <google-we...@googlegroups.com>.
> >> To unsubscribe from this group, send email to google-web-toolkit+**
> >> unsub...@googlegroups.com<google-web-toolkit%2Bunsubscribe@googlegroups. com>
> >> .
> >> For more options, visit this group athttp://groups.google.com/**
> >> group/google-web-toolkit?hl=en<http://groups.google.com/group/google-web-toolkit?hl=en>
> >> **.

>
> > --
> > 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-web-toolkit@**googlegroups.com<google-we...@googlegroups.com>
> > .
> > To unsubscribe from this group, send email to google-web-toolkit+**
> > unsub...@googlegroups.com<google-web-toolkit%2Bunsubscribe@googlegroups. com>
> > .
> > For more options, visit this group athttp://groups.google.com/**
> > group/google-web-toolkit?hl=en<http://groups.google.com/group/google-web-toolkit?hl=en>
> > **.
>
>
>
>  TabLayoutPanel_DynamicResizingWithScrollPanel.PNG
> 102KViewDownload