Question

我有以下代码：

    <h:form id="mainForm">

      <p:panelGrid columns="2" layout="grid">

                <h:panelGroup styleClass="containers" layout="block">

                    <p:outputLabel for="document" value="Document" />
                    <p:inputText id="document"
                        value="#{dIGRCController.digrc.documento}" readonly="true" />
                    <h:link styleClass="searchLink" value="Search Documents"
                        outcome="searchDigrc.xhtml"></h:link>

                    <!-- #{dIGRCController.digrc.impresn == 'S'} -->
                    <p:outputLabel for="concept" value="Concept" />
                    <p:selectOneMenu id="concept"
                        value="#{dIGRCController.digrc.qconce}"
                        requiredMessage="You must select a Concept" required="true">

                        <f:selectItem itemLabel="Select" itemValue="" />
                        <f:selectItems
                            value="#{cCRX1Controller.ccrx1.concepts.entrySet()}"
                            var="concept" itemValue="#{concept.key}"
                            itemLabel="#{concept.value.tbdesc}" />

                        <p:ajax listener="#{dIGRCController.setDropDownSelectedCcrx1}"
                            update="hiddenSections, searchAgentsLink, agenteName, documentValue, containerDocQty, containerMethodPayment" />

                    </p:selectOneMenu>

                    <p:outputLabel for="todaysDate" value="Date" />
                    <p:inputText id="todaysDate" readonly="true"
                        value="#{dIGRCController.digrc.fecha}" />
                </h:panelGroup>

                <h:panelGroup styleClass="containers" layout="block">

                    <h:panelGroup>
                        <p:outputLabel for="agenteName" value="Agent Name" />
                        <p:inputText id="agenteName"
                            readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
                            value="#{dIGRCController.digrc.nombre}" required="true"
                            requiredMessage="You must enter an Agent Name" />
                        <h:panelGroup id="searchAgentsLink">
                            <h:link styleClass="searchLink" value="Search Agents"
                                rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
                                outcome="searchAgex1">

                                <f:param name="concept" value="#{dIGRCController.digrc.qconce}" />

                                <c:if test="#{not empty dIGRCController.digrc.documento}">
                                    <f:param name="documento"
                                        value="#{dIGRCController.digrc.documento}" />
                                </c:if>

                            </h:link>
                        </h:panelGroup>
                    </h:panelGroup>

                    <p:outputLabel for="documentValue" value="Document Value" />
                    <p:inputText id="documentValue"
                        value="#{dIGRCController.digrc.documVal}" required="true"
                        requiredMessage="You must enter a Document Value"
                        validatorMessage="The Document Value must be greater than 0"
                        readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 9 or 
                        dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1 or 
                        dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'F'}">

                        <f:validateDoubleRange minimum="0.01" />

                        <p:ajax event="change" update="containerIdTwo"></p:ajax>

                    </p:inputText>

                    <h:panelGroup styleClass="containers" layout="block"
                        id="containerDocQty">
                        <h:panelGroup
                            rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.pideqtysn == 'S'}">

                            <p:outputLabel for="documentQuantity" value="Document Quantity" />
                            <p:inputText id="documentQuantity"
                                value="#{dIGRCController.digrc.qtyDoc}" required="true"
                                requiredMessage="You must enter a Document Quantity" />

                        </h:panelGroup>
                    </h:panelGroup>

                </h:panelGroup>

            </p:panelGrid>

      <p:panelGrid columns="1" layout="grid" id="hiddenSections">

        <h:panelGroup styleClass="containers" layout="grid" id="moneyOrder"
            rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1}">

            <h2>Money Orders</h2>

            <p:outputLabel for="moneyOrdersQty" value="Quantity" />
            <p:inputText id="moneyOrdersQty"
                value="#{dIGRCController.digrc.moqty}" />

            <p:outputLabel for="moneyOrdersVal" value="Value" />
            <p:inputText id="moneyOrdersVal"
                value="#{dIGRCController.digrc.moval}">

                <p:ajax update="documentValue" event="change"
                    listener="#{dIGRCController.setDocValueToMoneyOrderValue()}" />

            </p:inputText>

        </h:panelGroup>

<h:panelGroup styleClass="containers" layout="block"
                    rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 8}">

                    <h2>Transfer Documents</h2>

                    <p:outputLabel for="numeroConduce" value="Transfer Number" />
                    <p:inputText id="numeroConduce"
                        value="#{dIGRCController.digrc.notransf}" required="true"
                        requiredMessage="You must enter a Number." />

                    <p:outputLabel for="suplidor" value="Supplier" />
                    <p:inputText id="suplidor" value="#{dIGRCController.digrc.c8supli}"
                        required="true" requiredMessage="You must enter a Supplier" />

                    <p:outputLabel for="tipoEnvio" value="Type of Transfer" />
                    <p:selectOneMenu id="tipoEnvio"
                        value="#{dIGRCController.digrc.c8tpenvio}"
                        requiredMessage="You must select a Type of Transfer"
                        required="true">

                        <f:selectItem itemLabel="Select" itemValue="" />
                        <f:selectItem itemLabel="Regular" itemValue="R" />
                        <f:selectItem itemLabel="Official" itemValue="O" />
                        <f:selectItem itemLabel="Express Regular" itemValue="E" />
                        <f:selectItem itemLabel="Express Official" itemValue="F" />

                        <p:ajax event="change" update="containerExtraEnvio"></p:ajax>

                    </p:selectOneMenu>

                    <p:outputLabel for="envioDestino" value="Destination" />
                    <p:selectOneMenu id="envioDestino"
                        value="#{dIGRCController.digrc.c8destino}"
                        requiredMessage="You must select a Destination" required="true">

                        <f:selectItem itemLabel="Select" itemValue="" />
                        <f:selectItem itemLabel="Capital" itemValue="C" />
                        <f:selectItem itemLabel="Interior" itemValue="I" />

                    </p:selectOneMenu>

                    <h:panelGroup id="containerExtraEnvio">
                        <h:panelGroup
                            rendered="#{dIGRCController.digrc.c8tpenvio == 'O' or dIGRCController.digrc.c8tpenvio == 'F'}">

                            <p:outputLabel for="envioAdicionales" value="Extra" />
                            <p:inputText id="envioAdicionales"
                                value="#{dIGRCController.digrc.c8qadi}" required="true"
                                requiredMessage="You must enter an Extra" />

                        </h:panelGroup>
                    </h:panelGroup>

                </h:panelGroup>

      </p:panelGrid>

    </h:form>

在第一个panelGrid中，有一个ID 概念的下拉列表。选择项目后，将更新ID为 hiddenSections 的容器。如果选择的概念是1，那么它应该显示货币订单。如果概念是8，它应该显示Transfer Documents（参见panelGrid，id为hiddenSections）。

下图显示了内部为空的七个DIV元素。为了清晰代码，我只显示其中两个（如果你想，你应该可以用两个重现）。

这七个DIV元素代表七个panelGroups，它们是根据我在上面解释的条件呈现的。当用户第一次进入屏幕时，由于尚未设置概念，因此都不会渲染它们。在这种情况下，我看到了我不想要的空白空间。我如何摆脱那些空白的空间？

Answer 1

在这种情况下，我看到了我不想要的空白空间。我如何摆脱那些空白的空间？

你的问题很模糊，我理解它有3种方式（如果我误解了，因为答案似乎在所有情况下都很明显）。

当组件未呈现时，它根本不会在html中显示。因此，如果空白字符表示空格字符，那么这些字符位于相关标记之外。
如果生成的表因css而占用空间，那么您希望该部分在页面加载时为空，那么您可以使用渲染。
我认为你问的就是：因为你的selectItem最初为null，所以8个中的panelGroup都没有被呈现，你想要在所选项目为null时呈现默认值。然后只需检查以查看默认panelGroup的值是否为空。

很抱歉，如果我误解了这个问题。

空格JSF未呈现组件

1 个答案: