GWT TabLayoutPanel 不呈现图形内容答案

【问题标题】：GWT TabLayoutPanel do not renders the graph contentGWT TabLayoutPanel 不呈现图形内容
【发布时间】：2010-09-23 10:00:00
【问题描述】：

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

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

【问题讨论】：

你选择了标签吗？
是的。我也这样做了。然而，我正在尝试的是让图形在一开始就正确呈现。如果它在 TabLayoutPanel 之外，它会呈现。

标签： gwt uibinder gwt-tablayoutpanel

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

TabPanel 确实有帮助。谢谢你。
太棒了！您可以随时为我的答案投票，甚至将其标记为正确的答案:)