Question

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

如果我不渲染复选框，它可以完美地工作。但是当我渲染复选框时，它会占用现有面板和新面板之间的空间。通常它有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>

使用Javascript：

function initializeSelectedConfigPage() {
        var collectorType = $('editForm:collectorType').value;
    if ( collectorType == 'Windows FileShare Collector') {
            displayAppropriatePane('fileShareInfos', 'button0');
        } else if ( collectorType == 'SharePoint Collector') {
            displayAppropriatePane('siteCollectionConfig', 'button0');
        } else if ( collectorType == 'SharePoint Online Collector') {
            displayAppropriatePane('siteCollectionConfig', 'button0');
        }
        else if ( collectorType == 'PE2 RACFCollector') {
            displayAppropriatePane('siteCollectionConfig', 'button0');
        }
        else if ( collectorType == 'PE2 ACF2Collector') {
            displayAppropriatePane('siteCollectionConfig', 'button0');
        }
        else if ( collectorType == 'PE2 TSSCOLLECTOR') {
            displayAppropriatePane('siteCollectionConfig', 'button0');
        }
    }

注意：我正在使用JSF ajax和render属性来切换组件。

Answer 1

猜测：

css属性

visibility:hidden

隐藏元素，但保持测量，就像元素显示一样

使用

display:none

也可以隐藏测量值，就像元素显示一样

隐藏组件占用额外空间

1 个答案: