GWT TabLayoutPanel 不呈现图形内容

Question

我有一个类似于以下的结构

<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> 

我有两个选项卡，其中显示图表，另一个显示
数据。但是，选项卡内的内容不可见。如果我把

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

在 TabLayoutPanel 之外我可以
查看图表，但如果我按上图放置，则图表不可见。
任何线索都会有所帮助。
提前致谢。

Answer 1

为了让 TabLayoutPanel 正常工作，您需要确保以下几点:

1) 您处于标准模式(使用 )
2) 您正在为 TabLayoutPanel 的父级使用 GWT 2.0 中的新布局面板之一。
或者
您明确指定 TabLayoutPanel 的高度(百分比不起作用，您必须使用不同的单位)。

TabLayoutPanel 使用基于其 *Layout 容器大小的绝对定位。它不会自动填充普通父元素(例如“div”)的空间。
因此，希望您可以简单地切换到使用 *LayoutPanels 之一作为父项(例如 DockLayoutPanel)。

如果使用 *LayoutPanel 不是一个选项 :由于 TabPanel 不能在标准模式下工作(如果你想跨浏览器兼容，你真的需要使用它)并且 TabLayoutPanel 不能很好地处理流体布局，我最终制作了我自己的版本TabPanel 并改用它。如果您对制作自己的自定义小部件感到满意并且不能使用 *LayoutPanels 之一，我建议您制作自己的或扩展现有小部件之一。

或者，您可以使用 CSS 或 JavaScript 将选项卡的内容区域从 position: absolute 更改为 position:relative，但这对我来说似乎有点麻烦，将来可能会中断。