How to split tabs in a tab panel into two rows

[Dave]

We have a GUI window for editing details data that basically has a
header section plus a tabbed panel detail section with 12 tabs. Is
there a way to have the tabs be rendered as two rows of tabs instead
of a single row. We are trying to avoid horizontal scrolling. The
problem is the required text in the tabs makes the screen too wide.

Thanks

Dave

[Dave]

I was able to help it some by using the extra boolean parameter to
tell the TabPanel that the text was HTML. I then inserted some HTML br
tags into the text to make the tabs do a linefeed between words. This
made the width of the tabs smaller.

Dave

[kirti]

hi,
can you please share the code for implementing this functionality?
regards
kirti

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

[MN]

http://google-web-toolkit-doc-1-5.googlecode.com/svn/javadoc/1.5/index.html?overview-summary.html
http://google-web-toolkit-doc-1-5.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/TabPanel.html#add(com.google.gwt.user.client.ui.Widget,%20java.lang.String,%20boolean)

[MN]

the best would be, if the TabBar widget would not base on
HorizontalPanel. a FlowPanel would be better so if it on the end of
space then it flow to the next row.

but i think it is not possibel to change this. only solution: copy the
whole TabBar and TabPanel to your own TabFlowBar and TabFlowPanel and
replace the panel = new HorizontalPanel() with the flowpanel.

[Dave]

What I did was insert extra <BR/> tags into my text labels. It did not
split the tabs into two rows. Instead it split the text in the tabs
into two rows which enabled my GUI to fit horizontally.

Dave

[nuno]

Dave,

You could in CSS set white-space: normal;
That way you can write normal text without worrying about formating.

Nuno

On Jul 28, 2:06 pm, Dave <bo...@widomaker.com> wrote:
> What I did was insert extra <BR/> tags into my text labels. It did not

> split thetabsinto two rows. Instead it split the text in thetabs

[karmela]

nuno,
I have tried using white-space: normal, but it doesn't work because it
has inline style and it gets overwritten.
this is what i have in my CSS:
.gwt-Label
{
white-space: normal;
}

could you please tell me to I can get this to work?

Thanks,
Karmela

[Dave]

I added the <BR/> markup to the text and passed in TRUE for the HTML
flag on the API telling it that the TAB contained HTML content.

Dave

[karmela]

Dave,
In-order to use the white-space, I have to do the following:
.gwt-TabBarItem .gwt-Label
{
white-space: normal !important;
}

this works, but the problem is that the tabs are still too long for
the page.
I want the tabs to resize depending on the screen size.

Any suggestions?

Thanks,
Karmela

[karmela]

I figured it out :)
I had to set the width of .gwt-TabBarItem-wrapper and .gwt-TabBarItem;
I also had take out the padding from .gwt-TabBar .gwt-TabBarItem.



Karmela