Le composant caché prend plus de place

Question

J'ai un formulaire sur lequel j'ai une combo. Sur le changement de la zone de liste déroulante, je charge un nouveau panneau sous le panneau existant et la case à cocher dans le panneau existant dans le formulaire.

Si je ne rends pas la case à cocher cela fonctionne parfaitement. Mais quand je rends la case à cocher, il y a de l'espace entre le panneau existant et le nouveau panneau. Notmally il a l'espace de 5px mais tout en rendant la case à cocher et le panneau il diminue à 1px entre la case à cocher et le nouveau panneau.

Voici le code 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'); 
     } 
    } 

Note: J'utilise JSF ajax et la propriété rendu pour activer les composants.

Answer 1

conjecture sauvage:

la propriété css

visibility:hidden 

cache l'élément mais conserve ESt des mesures comme si l'élément a été montré

utilisation

display:none 

aussi cacher les mesures comme si l'élément était affiché