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.
