css - JSF 中的自动填充

Question

我有一个包含 2 个单元格(左侧和右侧)的 PanelGrid。它是一个大面板网格，在左侧单元格中我有一些文本，所以我有一个大单元格，在中间是一个最小文本。在右边我有一个 inputTextArea。当我想为左侧单元格设置背景时，它只影响文本周围，所有单元格仍然没有颜色。我使用填充(设置像素数)选项来调整单元格背景。问题是 InputTextArea。当您调整文本区域大小时，单元格也会调整大小，但左侧单元格编号的填充。 Ss 是否有任何选项不需要设置填充像素，当我调整单元格大小时，背景颜色也一样？

非常感谢!

Answer 1

如果您希望背景颜色覆盖整个单元格，您需要在单元格本身而不是单元格的内容上设置它。

<h:panelGrid column="2" columnClasses="leftColumn,rightColumn">
    <h:outputText />
    <h:inputTextarea />
</h:panelGrid>

您在 leftColumn 中指定背景颜色类。

另一种方法是使单元格内容成为 block 元素而不是行内元素，以便其大小跨越整个单元格。例如。通过将其设为 <div>

<h:panelGrid column="2">
    <h:panelGroup layout="block" styleClass="redBackground">
        <h:outputText value="some" />
    </h:panelGroup>
    <h:inputTextarea />
</h:panelGrid>

或通过添加 display: block;到 redBackground下面示例中的类(虽然很讨厌):

<h:panelGrid column="2">
    <h:outputText value="some" styleClass="redBackground" />
    <h:inputTextarea />
</h:panelGrid>

填充在此上下文中无关紧要。您的具体问题只是背景颜色设置在错误的元素上。