jsf - 如何减少 Primefaces 中 p:tabView 内的空格？

Question

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

提前致谢。

Answer 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 使这种样式特定于面板。