GWT TabLayoutPanel do not renders the graph content

Question

I have a structure similar to following

<g:TabLayoutPanel ui:field="rightTabPanel" 
             width="100%" height="100%" 
                     barUnit="EM" barHeight="3"> 
    <g:tab> 
          <g:header>Graph</g:header> 
                    <g:FlowPanel ui:field="graphContent"/> 
     </g:tab> 
      <g:tab> 
           <g:header>Data</g:header> 
                      <g:FlowPanel ui:field="dataContent"/> 
     </g:tab> 
 </g:TabLayoutPanel>

I have two tabs on of which shows the graph and another one shows data. However the content inside a tab is not visible. If I put

<g:FlowPanel ui:field="graphContent"/>

outside of TabLayoutPanel I can see the graph, but If I put as shown above the graph is not visible. Any clue would be helpful. thanks in advance.

yes. I did that also. However what I am trying is to get the graph rendered right in the beginning. It does renders if it outside of TabLayoutPanel. — lalit, Sep 23 '10 at 10:13

Nate Bundy · Answer 1 · 2010-09-23T15:54:45.553

In order for TabLayoutPanel to work correctly, you need to ensure the following:

1) You're in standards mode (using <!DOCTYPE html>)
2) You're using one of the new Layout panels from GWT 2.0 for TabLayoutPanel's parent.
OR
You specify the height for TabLayoutPanel explicitly (and percentages won't work, you'll have to use a different unit).

TabLayoutPanel uses absolute positioning based on the size of its *Layout container. It will not auto-fill space for normal parent elements (such as "div"). So, hopefully, you can simply switch to using one of the *LayoutPanels as a parent (such as DockLayoutPanel).

If using a *LayoutPanel isn't an option: Since TabPanel doesn't work in standards mode (which you really need to be using if you want to be cross-browser compatible) and TabLayoutPanel doesn't work well with fluid layouts, I've ended up making my own version of a TabPanel and using that instead. If you're comfortable with making your own custom widgets and you can't use one of the *LayoutPanels, I'd recommend making your own or extending one of the existing widgets.

Alternatively, you can use CSS or JavaScript to change the tab's content area from position: absolute to position: relative, but that seems like a bit of a hack to me and may break in the future.

score 5 · Answer 2 · answered Sep 23 '10 at 13:59

5

I don't know if it helps, but maybe try using <g:TabPanel> instead of <g:TabLayoutPanel>. I know it is deprecated.

I also had problems with TabLayoutPanel, but they are gone when I switched back to TabPanel. TabLayoutPanel has some sizes issues, e.g. cannot be put in a div, it has to "own" whole window, so it's quite different thing that TabPanel.

answered Sep 23 '10 at 13:59

amorfis

15,390
15
77
125

Great! You can always upvote my answer, or even mark it as correct one :) – amorfis Sep 24 '10 at 09:46

GWT TabLayoutPanel do not renders the graph content

2 Answers2