在h:panelGrid行之间插入空格

时间:2014-08-01 15:05:46

标签: css jsf-2 panelgrid

版本:

Aapche MyFaces 2.1.14

RichFaces 4.3.5

问题:

我遇到了在h:panelGid的行之间插入空格的问题。以下是该页面的总体布局:

User Id :   <empty space>
<INPUT-BOX>     <empty space>

<!-- space here -->

Password 1  :   <empty space>
<INPUT-BOX>     Description Text

<!-- space here -->

Password 2  :   <empty space>
<INPUT-BOX>     Description Text

要获得上述布局,我使用了下面的代码。每个内部面板网格在两列中包含4个元素。 顶部面板网格将所有内部面板网格包裹为1列。

问题是,我无法在两个内部面板网格之间或更具体地说在表格单元格之间获得空间。 我尝试过使用:

1)cellspacing

2)rowClasses

但两个approches都没有工作。用于rowClasses的样式如下所示。 通过浏览器调试时,似乎rowClasses确实应用于表的每个<tr>

有人可以帮忙吗?

代码:

<h:panelGrid columns="1" rowClasses="tableCell,tableCell,tableCell,tableCell" cellspacing="100px">


        <h:panelGrid columns="2">
                <h:outputText value="User ID:" styleClass="label"/>
                <h:outputText value=""/>

                <h:inputText id="userid" name="userid" styleClass="input"/>
                <h:outputText value=""/>
        </h:panelGrid>

        <!-- space here --> 


        <h:panelGrid columns="2">
                <h:outputText value="Password1:" styleClass="label"/>
                <h:outputText value=""/>

                <h:inputText id="passwd1" name="passwd1" styleClass="input"/>
                <h:outputText  value="This is password 1"/>

        </h:panelGrid>

        <!-- space here --> 
        <h:panelGrid columns="2">
                <h:outputText value="Password2:"/>
                <h:outputText value=""/>

                <h:inputText id="passwd2" name="passwd2" styleClass="input"/>
                <h:outputText value="This is password 2 ."/>
        </h:panelGrid>
        <!-- space here --> 

        <h:commandButton id="submit" styleClass="button" value="Submit" action="#{bean.action}"/>


</h:panelGrid>

<!-- style -->

.tableCell{
    margin-top : 100px;
}

0 个答案:

没有答案