css - gwt tablayout 在增加填充、字体、边距时隐藏选项卡

Question

我创建了TabLayoutPanel. 如果它是

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner

CSS 类是用填充修改的，比如说 padding: 15px;或font-size: 25px;

然后，选项卡隐藏在浏览器窗口中。是什么原因以及如何解决这个问题？

谢谢，班纳特。

Answer 1

只是一个猜测（没有看到任何代码），但我敢打赌你没有正确添加你的 TabLayoutPanel。“布局”面板很棒，但您必须遵守规则。

确保您有一个完整的“布局”类型面板链接，一直到“RootLayoutPanel”。

此外，验证您实际上是在使用“RootLayoutPanel”而不是“RootPanel”将您的 gwt 小部件添加到 dom

RootLayoutPanel.get().add(myTabLayoutPanel);

请参阅此处，特别是标题为“RequiresResize”和“ProvidesResize”的部分 http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

.gwt-TabLayoutPanelTabInnerlabel是实际中显示的包装器tab。当您尝试增加padding（比如说padding : 'z'px;）时，它会从各个方向将标签推入“z”像素，并最终隐藏在封闭的 div 或.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs. 作为一种解决方案，您可以调整 以padding使其不会隐藏在父级后面div或增加size父级以允许tabs获取更多padding。