Also, make sure the height of the tabLayoutPanel is set to 100%
.gwt-TabLayoutPanel {
height : 100%;
}
~Ashwin
On Tue, Jul 19, 2011 at 8:10 PM, [email protected] <
[email protected]> wrote:
> 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
>
>
> On Tue, Jul 19, 2011 at 7:55 PM, MChan <[email protected]> wrote:
>
>> 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
>>
>> --
>> 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.
>>
>> To post to this group, send email to [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
