如何减少 Primefaces 中 p:tabView 内的空格？答案

【问题标题】：How to reduce spaces inside p:tabView in Primefaces?如何减少 Primefaces 中 p:tabView 内的空格？
【发布时间】：2012-07-19 08:04:23
【问题描述】：

我正在使用 Primefaces V3.3.1 并希望减少 p:tabView 中的空间。在这种情况下，我有 2 个嵌套的 p:tabView 和 p:dataTable。屏幕空间对我们来说非常昂贵，所以我想减少显示红色和蓝色的空间。所以，问题 1：如何减少 p:tabView 内的空格（涂成红色）？问题 2：如何减少 p:dataTable 周围的空格（涂成蓝色）？

提前致谢。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

首先你应该学习一些关于css的东西......你所说的“空间内部”是填充css属性，你所说的“空间周围”是边距。无论如何，要减少选项卡的填充，请将以下样式添加到您的 css 文件中：

.ui-tabs .ui-tabs-panel {
      padding: 5px 5px;
}

这将减少所有标签视图的平移。如果你想让这个样式只应用于部分tabView，那么你应该使用tabView的styleClass属性，然后将css规则替换为.youTabClass .ui-tabs .ui-tabs-panel

至于数据表..数据表本身没有边距。但似乎在您模糊的屏幕截图中，桌子周围有一个面板。 p:panel 也有填充。减少面板的填充：

.ui-panel .ui-panel-content {
     padding: 5px 5px;
}

这也适用于您的所有面板，因此您应该使用 atyleClass 使这种样式特定于面板。

【讨论】：

@Damian，谢谢你帮助我。我可以减少标签的填充。是的，我使用了围绕桌子的面板，可以减少它的填充。现在我还有几个目标要减少，但我希望我能自己找到。
@Tomcat 不客气。要确定需要更改哪些 css 类，请查看 primefaces 指南（在每个组件中，都有一个命名 css 类的 Skinning 部分）；或者你可以使用萤火虫