TabLayoutPanel expand to fit content?

[Falcon]

I'm pretty new to the GWT layout system. Since I'm using standards
mode I really should use TabLayoutPanel instead of TabPanel. However,
I need the content area of each tab to fill all of the vertical and
horizontal space of its parent. How do I accomplish that?

Thanks!

[Falcon]

Perhaps I should be more specific.

My problem is that I have multiple TabLayoutPanels in nested widgets.
It appears that if you have a single TabLayoutPanel attached to
RootLayoutPanel, then the tab's content area will fill the space
needed to show the content. However, my structure is like the
following:

<RootLayoutPanel>
<g:HTMLPanel>
<h1>Title</h1>
<Widget>
<g:TabLayoutPanel ...>
...
<AnotherWidget>
<g:TabLayoutPanel ...>
...
</g:TabLayoutPanel>
</AnotherWidget>
</Widget>
</g:HTMLPanel>
</RootLayoutPanel>

I've been playing with DockLayoutPanels, LayoutPanels, etc. and the
only thing that will show up are the tabs on the first TabLayoutPanel;
the content won't show up without setting a height, and the height
needs to be determined by the content instead.

[Falcon]

That code should be:

<RootLayoutPanel>
<g:HTMLPanel>
<h1>Title</h1>
<Widget>
<g:TabLayoutPanel ...>
...
<AnotherWidget>
<g:TabLayoutPanel ...>
...
</g:TabLayoutPanel>
</AnotherWidget>

</g:TabLayoutPanel>
</Widget>
</g:HTMLPanel>
</RootLayoutPanel>

[MChan]

Hi,

Have you figured out how to accomplish what you were trying to do?

It could help the similar issue I've got here. I'm trying to get something like:

<RootLayoutPanel> 

<g:HTMLPanel> 

  <h1>Title</h1> 

  <Widget> 

    <g:TabLayoutPanel ...> 

      <AnotherWidget> 

        ...

      </AnotherWidget>

    </g:TabLayoutPanel ...> 

  </Widget>

  <Widget>

    <g:TabLayoutPanel ...> 

      <AnotherWidget> 

        ...

      </AnotherWidget>

    </g:TabLayoutPanel ...>

  </Widget> 

</g:HTMLPanel> 

</RootLayoutPanel>

The h1 item displays, but the first Widget that contains the TabLayoutPanel takes the rest of the page height. and the second TabLayoutPanel is not displayed at all (but I can see it's there when inspecting the html output).

Thanks,

MChan

[ashwin....@gmail.com]

you are having this problem because your page is not able to resize properly. What sort of widget is your <Widget> is that a Simple Panel? 

 you can place your Tab Layout Panel directly inside the RootLayout Panel. since you want to have two Tab Panels, place them inside a simple panel would not work properly. Instead use ResizeLayoutPanel (this is an extension of SimplePanel) which can automatically resize.

Regards

Ashwin

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

[MChan]

Hi,

As a matter of fact, I'll have more than two TabLayoutPanel on one page. I'm trying to create a result page, and each result has a "Show details" link which opens a TabLayoutPanel that displays 2 tabs.

I simplified what I'm trying to achieve in a separated project, but I still can't get what I want...

Here's what I have:

public void onModuleLoad() {

Grid grid = new Grid(2, 1);

grid.setWidth("550px");

grid.setWidget(0, 0, createResult());

grid.setWidget(1, 0, createResult());

RootLayoutPanel.get().add(grid);

}

private Widget createResult() {

TabLayoutPanel details = new TabLayoutPanel(1.5, Unit.EM);

HTML contentFirst = new HTML("Lorem Ipsum is simply dummy text of the printing and"

+ "typesetting industry. Lorem Ipsum has been the"

+ " industry's standard dummy text ever since the 1500s,"

+ "when an unknown printer took a galley of type and scrambled" + "it to make a type specimen book."

+ "Lorem Ipsum is simply dummy text of the printing and"

+ "typesetting industry. Lorem Ipsum has been the"

+ " industry's standard dummy text ever since the 1500s,"

+ "when an unknown printer took a galley of type and scrambled" + "it to make a type specimen book.");

details.add(contentFirst, "First");

HTML contentSecond = new HTML("Content <b>bold</b>");

details.add(contentSecond, "Second");

details.selectTab(0);

details.setAnimationDuration(500);

details.setHeight("100%");

ResizeLayoutPanel detailsContainer = new ResizeLayoutPanel();

detailsContainer.add(details);

detailsContainer.setHeight("100%");

return detailsContainer;

}

When I set ReisizeLayoutPanel height to "100px", it displays the content of the tabs. However, when I set it to 100%, I can only see the two TabLayoutPanel headers (with the "First" and "Second" tab title). And the content varies from result to result, so I can't set a pixel height.

When I add the ResizeLayoutPanels returned by createResult() directly in RootLayoutPanel, they are overlying.

I also tried adding .gwt-TabLayoutPanel { height: 100%; } in my CSS.

I'm a bit out of ideas; do I need to add something other than HTML elements as widgets in the TabLayoutPanel? (I tried with LayoutPanel, SimplePanel..). I also tried using a FlowPanel instead of the grid, with no much success either.

Regards,

MChan

[ashwin....@gmail.com]

the problem is not with your TabLayout panel. what you have there would work fine. The issue is with the Grid.

Its best to use LayoutPanels inside other layoutpanels. In your case if all that you are doing is rendering two TabLayoutPanels, you don't have to necessarily use a grid. 

i would instead try the following options

Option 1: 

use a SplitLayoutPanel and add it to the RootLayoutPanel. render both your tablayoutpanels to this panel.

Option 2:

Use a HTMLPanel instead of the grid, with two ResizeLayoutPanels. Render a TabLayoutPanel to each of these resize Panels. 

~Ashwin

MChan

--

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

[ashwin....@gmail.com]

Also, make sure the height of the tabLayoutPanel is set to 100%

.gwt-TabLayoutPanel {

height : 100%;

}

~Ashwin

[MChan]

Hey,

Thanks for your quick reply.

So, I already had the CSS rule for TabLayoutPanel set to 100%. I can see it in "Inspect Element" tool of Chrome.

I'm not sure if using the SplitLayoutPanel (or DockLayoutPanel) would be okay in my situation, as the their center panel only accept one child widget. And I will eventually need to have more than 2 TabLayoutPanel (something like 10 on the same page, one per result, and opened when clicking the "Show details" link of a result). Am I wrong, should I really use it?

I tried with the HTMLPanel in my module load:

HTMLPanel html = new HTMLPanel("");

html.setWidth("550px");

html.add(createResult());

html.add(createResult());

RootLayoutPanel.get().add(html);

And in the createResult method:

- When: [ResizeLayoutPanel] detailsContainer.setHeight("100%"); --> it does show the first TabLayoutPanel on the resulting page, but not the second.

- When: [TabLayoutPanel] details.setHeight("100%); --> I can only see the tabs title, but not the tabs content.

Thanks,

MChan

[ashwin....@gmail.com]

are you setting 100% as the height for both the resize layout panels? if yes how will the page render as your total height is 100% and you are assigning to the 1st resisze panel, the second panel would not be able to calculate its layout details.

try setting the height to 50% and see the out come.

--

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

[MChan]

Yeah, I was setting both heights to 100%. 

When I set the ResizeLayoutPanels height to 50%, I see them both on my test page, each taking 50% of the vertical space. That's a start!

However, what I'm trying to achieve is the TabLayoutPanel to show when I click on "Show details" on a result.

Example:

Results

  Result { Title, Date, @"Show details" }

    When clicking Show details, show TabLayoutPanel with its 2 tabs, positioned under Result

  Result ...

Is there a way to fit the tab content? My two tabs will generally not have the same height, and the content varies from result to result.

Can the tab height adjust dynamically to its content?

Regards,

MChan

[ashwin....@gmail.com]

oh, if you want to render your panels on click of a button, then you don't necessarily need two ResizeLayoutPanels, just render the contents of the appropriate tabLayoutPanel 

alternatively, you can set the visibility of the panels to true/ false on click. this would also force the height adjustment. But I would recommend the first approach

Thanks

Ashwin

MChan

--

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

[MChan]

It still did not work. However, when I changed the resulting divs (Chrome inspect element tool) position to "relative" instead of absolute, I was able to see the tab content fit. But I can't do that programmatically.

I ended up creating my own control, with custom animation.

Thanks for your time!

MChan

[ashwin....@gmail.com]

you can set styles via code. 

MChan

--

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

[MChan]

Well, in that case it seems the Layout implementation of GWT overrides when I set position via [Widget].getElement().getStyle().setPosition(Position.RELATIVE) ; it sets the position to 'absolute'. The same goes for overflow property, which is set to 'hidden' whatever I manually set it to in my code.

I could have set some !important CSS rules (overrigin element style) to select some of the divs that need to be positionned 'relative', but given the markup, I would have to use the :nth-child(..) pseudo-class (if you look at the output markup, there are absolute positionned elements added by GWT with height set to ~500px in my case, so I don't want those absolute positionned element to be 'relative', thus the need to select specific children of the TabLayoutPanel). And I can't use that pseudo-class because it is not supported in IE6, and I need to support that browser.

In any case, I found it easier to build my own control instead of tweaking with TabLayoutPanel to expand to fit tab content!

Regards,

MChan