tags:

views:

106

answers:

2
+1  Q: 

GWT TabLayoutPanel do not renders the graph content

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.

A: 

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.

amorfis  2010-09-23 13:59:24
TabPanel did helped. Thanks for that.
lalit  2010-09-24 04:40:01
Great! You can always upvote my answer, or even mark it as correct one :)
amorfis  2010-09-24 09:46:53
+1  A: 

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.

Nate Bundy  2010-09-23 15:43:50

related questions

Stop a event from bubbling in GWT
How can I format text in GWT label widget
GWT FileUpload initial path
Can't compile class calling a method in an interface with a generic list argument
Which effects library should I integrate with GWT?
Client side Callback in GWT
GWT Table that supports sorting, scrolling and filtering
Google Web Toolkit
Extract all string from a java project
http/AJAX (GWT) vs Eclipse gui for thin client deployment
Why does GWT ignore browser locale?
How do I add a type to GWT's Serialization Policy whitelist?
How do I make a gwt-ext window not resize when its content resizes?
Best practice for parameterizing GWT app?
GWT-EXT - What is the best way to widgets to a specific ContentPanel after an event?
GWT or DOJO or something else?
How can I best connect Seam and GWT in a stateful web application?
Biggest GWT Pitfalls?
Creating a fluid panel in GWT to fill the page?
Widget notifying other widget(s)
gwt lazy loading
GWT context.xml in shell mode
Should I use Google Web Toolkit for my new webapp?
how to get locale information on a GWT application
Stand alone charts in GWT