Question

我想创建一个JSF表单，用户可以在其中编写姓名和姓氏，并使用JSF验证器对其进行验证。问题是我想在表格中的2个inputText框之间设置相同的空格，在这两种情况下，根据验证器输入的数据是正确的，以及当它不正确时。因此，如果2个inputText框之间有X像素，如果用户没有输入任何内容，当键入的名称不正确时，应在2个inputText框之间显示错误显示消息，它们之间的像素也应该是X px。我想这是一个CSS问题，但我无法得到它，所以任何帮助都会受到赞赏。

这是我的代码

<h:form>
                <p:panel id="panelregister">
                <h:panelGrid columns="1">

                    <!--Name-->
                    <p:inputText id="name" label="name" size="32" maxlength="9"
                             value="#{mManagedBean.name}">              
                    <f:validator validatorId="packagevalidators.NameValidator"/> 
                    </p:inputText>
                    <p:watermark for="name" value="Name (*)" />
                    <p:message for="name"/>




                    <!--Surname-->
                    <p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
                            value="#{mManagedBean.surname}"
                            requiredMessage="Must enter a surname">              
                        <f:validator validatorId="packagevalidators.SurnameValidator"/> 
                   </p:inputText>
                   <p:watermark for="surname" value="Surname (*)" />
                   <p:message for="surname" />

                 <p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
                 </h:panelGrid>
                 </p:panel>
             </h:form>

Answer 1

您正在使用h:panelGrid呈现为HTML <table> p:message将呈现为div，默认情况下div不会包含任何内容，因此不会占用您提供的任何空间。
一种方法是在其周围使用h:panelGroup并给出预先定义的p:message高度例如：

<h:panelGroup layout="block" style="height:27px">
    <p:message for="name" />
</h:panelGroup>

使用JSF和CSS的2个inputText框之间的空间相同

1 个答案: