html - selectOneMenu inside panelGrid -> 行高太大

Question

我有一个 ui-composition，其中包含一个包含 panelGrid 的表单。 panelGrid 有 7 行，每行 4 列。最后一行在第二列中包含一个 selectOneMenu。
要求调整行高为22px。单元格中的每个元素都是 21px 或更小。 Firebug 告诉我，selectOneMenu 也是 21px 高。但不知何故，该行将高 25 像素。我发现的唯一 css 更改会改变这一点，就是将 selectOneMenu 的内部标签的高度从 15px 设置为 12px。但这不是解决方案，因为每个输入的内部高度都是 15px。

<p:row>
<p:column styleClass="columnLabel">
<p:outputLabel value="#{msgs.inv_sum_assignment}" />
</p:column>
<p:column>
<p:selectOneMenu styleClass="assign" disabled="#{summaryBean.noInvoiceSelected}" value="#{summaryBean.assignedUser}" converter="vertreterConverter" immediate="true">
<f:selectItem itemValue="#{null}" />
<f:selectItems value="#{summaryBean.possibleAssignments}" var="vertreter" itemLabel="#{vertreter.lastname}, #{vertreter.firstname}" itemValue="#{vetreter}" />
<p:ajax event="change" />
</p:selectOneMenu>
</p:column>  
...

带有 selectOneMenu 的单元格的屏幕截图 Tr 风格

选择一个菜单布局

布局

你能帮我把行高设置为 22px 还是不可能？

我正在使用:primefaces 版本 6.1com.sun.faces jsf 版本 2.2.8

Answer 1

<p:panelGrid columnClasses="rowHeight">

在你的 CSS 中:

.rowHeight {
    height: 22px;
    max-height: 22px;
}

强制执行:

.rowHeight {
    height: 22px !important;
    max-height: 22px !important;
}

如果这仍然不起作用，您需要转到 panelGrid 中的每个元素并删除边距和填充。

如果这仍然不起作用，则意味着您在 panelGrid 中自定义了一个具有特定高度的元素，并且需要找到一个女巫 ;)

一旦成功，您可以尝试删除最大高度和 !important。然后你会找到罪魁祸首