3

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

<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 之外我可以看到图表，但如果我如上所示放置图表不可见。任何线索都会有所帮助。提前致谢。

4

2 回答 2

9

为了使 TabLayoutPanel 正常工作，您需要确保以下内容：

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

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

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

或者，您可以使用 CSS 或 JavaScript 将选项卡的内容区域从位置：绝对更改为位置：相对，但这对我来说似乎有点 hack，并且将来可能会中断。

于 2010-09-23T15:43:50.003 回答
5

我不知道它是否有帮助，但也许尝试使用<g:TabPanel>而不是<g:TabLayoutPanel>. 我知道它已被弃用。

我也遇到了 TabLayoutPanel 的问题，但是当我切换回 TabPanel 时它们就消失了。TabLayoutPanel 有一些尺寸问题，例如不能放在一个 div 中，它必须“拥有”整个窗口，所以它与 TabPanel 完全不同。

于 2010-09-23T13:59:24.927 回答