Скрытый компонент занимает дополнительное пространство

У меня есть форма, на которой у меня есть поле со списком. При изменении поля со списком я загружаю новую панель под существующей панелью и флажок в существующей панели в форму.Скрытый компонент занимает дополнительное пространство

Если я не снимаю флажок, он отлично работает. Но когда я устанавливаю флажок, он ест пространство между существующей панелью и новой панелью. Notmally имеет пространство 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 и вынесенное свойство для переключения компонентов.

источник

2014-09-09 code_fish

Это не похоже на любой xhtml, который я когда-либо видел. Можете ли вы опубликовать рабочий пример jsfiddle, который показывает проблему? Я не могу воссоздать это так. –

Похож на JavaServer Faces, или так кажется, когда я Googled тег. – GolezTrol

Да, это JSF. Добавлен тег для jsf. –

дикое предположение:

CSS-свойство

visibility:hidden

скрывает элемент, но держит подмигнул измерение, как если элемент был показан

использование

display:none

также скрыть измерения, как если бы элемент был показан

источник

2014-09-09 11:32:24

Я использую JSF ajax и rendered свойство для переключения компонентов. –

Скрытый компонент занимает дополнительное пространство

ответ

Смежные вопросы