Jsf 隐藏组件占用额外的空间

我有一张表格，上面有一个组合框。在更改组合框时，我将在现有面板下方加载一个新面板，并将现有面板中的复选框加载到表单中

如果我不渲染该复选框，它将正常工作。但当我渲染复选框时，它会占用现有面板和新面板之间的空间。它通常有5px的空间，但在渲染复选框和面板时，复选框和新面板之间的空间减少到1px

以下是xhtml代码：

<ui:define name="body">
<f:view>
  <h:form id="editForm">
      <h:outputText value="Target Source Types"/>
      <h:panelGroup>
        <a4j:outputPanel id="collectorSettings">
          <h:selectOneMenu id="collectorType"
                           value="#{targetSource.object.type}"
                           rendered="#{empty targetSource.object.id}"
                           <f:ajax event="change" 
                                   onevent="selectCollectorType"
                                   render="overrideProvisioningTextPanel overrideProvisioningPanel targetCollectors targetCollectorsTextPanel"
                                   execute="@this"
                                   listener="#{targetSource.handleOverrideProvisioningAction}"/>
            <f:selectItem itemValue="" itemLabel="#{msgs.select_collector_type}"/>
            <f:selectItems value="#{targetSource.collectorTypes}"/>
          </h:selectOneMenu>
                    <h:selectOneMenu id="fixedCollectorType" value="#{empty targetSource.object.type ? 'None' : targetSource.object.type}"
                           rendered="#{not empty targetSource.object.id}"
                           disabled="true"
                           readonly="true">
            <f:selectItem itemValue="#{empty targetSource.object.type ? 'None' : targetSource.object.type}"
                          itemLabel="#{empty targetSource.object.type ? msgs.none : targetSource.object.type}"/>
          </h:selectOneMenu>
        </a4j:outputPanel>
      </h:panelGroup>

      <h:panelGroup id = "overrideProvisioningTextPanel">
          <h:outputText value="Override Default Provisioning" 
                        rendered="#{not empty targetSource.object.type and !targetSource.overridenProvisioningToggle}"/>
      </h:panelGroup>
      <h:panelGroup id = "overrideProvisioningPanel">
          <h:selectBooleanCheckbox id="provisioningOverridden" 
                               value="#{targetSource.provisioningOverridden}"
                               rendered="#{not empty targetSource.object.type and !targetSource.overridenProvisioningToggle}"
                               readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
                               <f:ajax event="click" render="targetCollectors targetCollectorsTextPanel"/>
          </h:selectBooleanCheckbox>
      </h:panelGroup>

      <h:panelGroup id="targetCollectorsTextPanel">
          <h:outputText value="Provisioning Action"
                        rendered="#{targetSource.provisioningOverridden}"/>
      </h:panelGroup>
      <h:panelGroup>
        <a4j:outputPanel id="targetCollectors">
          <h:selectOneMenu id="collector"
                           value="#{targetSource.object.targetCollector}"
                           rendered="#{targetSource.provisioningOverridden}"
            <f:selectItem itemValue="" itemLabel="#{msgs.select_provisioning_collector}"/>
            <f:selectItems value="#{targetSource.targetCollectors}"/>
          </h:selectOneMenu>
        </a4j:outputPanel>
      </h:panelGroup>
    </h:panelGrid>
    </a4j:outputPanel>

    <a4j:outputPanel id="configSettings">
      <h:messages infoClass="formInfo" warnClass="formWarn" errorClass="formError" fatalClass="formError"/>

      <h:panelGroup  rendered="#{not empty targetSource.object.collector}">
        <ui:include src="#{targetSource.configPage}"/>
      </h:panelGroup>
    </a4j:outputPanel>

    <div class="buttonRow">
      <ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageApplication')}">
        <h:commandButton id="targetSourceSave" action="#{targetSource.saveAction}" value="#{msgs.button_save}" styleClass="primaryBtn" 
                         onclick="return isSaveOk(this);"/>
      </ui:fragment>
      <h:commandButton id="targetSourceCancel" action="#{targetSource.cancelAction}" value="#{msgs.button_cancel}" styleClass="secondaryBtn" />
    </div>

    <a4j:commandButton id="refreshTargetSourceRulesButton"
                       style="display:none"
                       immediate="true"
                       render="targetSourceRulesPanel"/>

    <a4j:commandButton id="selectTypeButton" action="#{targetSource.selectType}" style="display:none"
                       render="configSettings, collectorSettings"
                       oncomplete="initializeSelectedConfigPage();"/>

  </h:form>
</f:view>

注:

---

我正在使用JSF ajax和rendered属性切换组件。

wild guess:

css属性

visibility:hidden 

隐藏元素，但保留其测量值，就像显示元素一样

使用

---

要隐藏测量值，就像显示元素一样

，这看起来不像我见过的任何xhtml。您可以发布一个可以工作的JSFIDLE示例来说明这个问题吗？我不能像这样重新创建它。看起来像JavaServer Faces，或者当我在谷歌上搜索一个标记时看起来是这样。是的，它是JSF。为jsf添加了标记。@CODEFISH：请将鼠标悬停在问题上的

[xhtml]

标记上，仔细阅读描述，然后单击“信息”链接并仔细阅读。最后，请采取相应的行动。另一方面，在HTML/CSS/JS上下文中询问时，最好发布JSF生成的HTML输出，而不是原始JSF源代码。HTML用户通常不知道JSF（顺便说一下，也不知道XHTML）。一旦您在HTML/CSS/JS上下文中得到了答案，那么您在JSF端需要做的就是确保它完全生成所需的HTML/CSS/JS。我将从现在开始阅读标签，我将使用JSF ajax和rendered属性来切换组件。

visibility:hidden 

display:none