JSF2 - selectOneMenu opens outside overlayPanel

697 Views Asked by At

I'm working with a <p:overlayPanel> that includes a couple of <p:selectOneMenu>s, as well as several other components. When the <p:selectOneMenu>s are opened, some of the fields fall outside of the <p:overlayPanel>, and clicking on them causes the panel to close. (See image below).

enter image description here

. . .

One solution would be to modify the <p:overlayPanel> as follows:

dismissable="false"
showCloseIcon="true"

Another would be to modify the <p:selectOneMenu>:

height="50"

I'm looking for some options for solutions that are as simple as possible and preferably don't involve a change to the UI (the above solutions both change the UI). Is there a way to keep the <p:overlayPanel> open when a click outside of it falls within one of its <p:selectMenu>s?

More Complete Code

<p:overlayPanel styleClass="col-settings-panel" 
            id="colSettingsPanel" 
            for="columnSettingsBtn" 
            hideEffect="fade"
            widgetVar="wvcolSettingsPanel"
            rendered="#{empty rendered ? 'true' : rendered}" >   
    <p:pickList id="pickList" 
            value="#{fileSearchPersonalizationBean.columns}" 
            var="column"
            showSourceFilter="true" 
            itemLabel="#{column}" 
            itemValue="#{column}" 
            itemDisabled="#{column eq 'Ref No'}">
            <p:ajax event="transfer" listener="#{fileSearchPersonalizationBean.onTransfer}" update="pickList availableCount selectedCount selectSortBy" />
            <f:facet  name="sourceCaption">
                <h:outputText value="Available Columns ("/>
                <h:outputText id="availableCount" value="#{fileSearchPersonalizationBean.sourceCount}"/>
                <h:outputText value=")"/>
            </f:facet>
            <f:facet name="targetCaption">
                <h:outputText value="Selected Columns ("/>
                <h:outputText id="selectedCount" value="#{fileSearchPersonalizationBean.targetCount}"/>
                <h:outputText value=")"/>
            </f:facet>
     </p:pickList>

  <p:panelGrid columns="1">
    <p:outputPanel styleClass="col-settings-panel-option">
        <h:outputLabel value="Sort By: " />
        <p:selectOneMenu id="selectSortBy" 
                value="#{fileSearchPersonalizationBean.sortBy}" >
            <p:ajax listener="#{fileSearchPersonalizationBean.sortByChanged}"   />
            <f:selectItems id="sortByList" value="#{fileSearchPersonalizationBean.columns.target}" />
        </p:selectOneMenu>
    </p:outputPanel>     
    <p:outputPanel styleClass="col-settings-panel-option">
         <h:outputLabel value="Items per Page:"/> 
         <p:selectOneMenu id="selectRows" value="#{fileSearchPersonalizationBean.sRows}" >
            <f:selectItem itemLabel="10" itemValue="10" />
            <f:selectItem itemLabel="25" itemValue="25" />
            <f:selectItem itemLabel="50" itemValue="50" />
            <f:selectItem itemLabel="100" itemValue="100" />
         </p:selectOneMenu>
    </p:outputPanel>
  </p:panelGrid>

  <p:panelGrid styleClass="toolbar" columns="2">
    <p:outputPanel>
        <p:commandButton styleClass="btn-secondary" 
                         id="loadDefaults" 
                         value="Reset Defaults" 
                         update="selectSortBy pickList selectRows" 
                         actionListener="#{fileSearchPersonalizationBean.loadDefaultVO}" />
    </p:outputPanel>
    <p:outputPanel styleClass="toolbar-right">
        <p:commandButton styleClass="btn-secondary" 
                         id="columnClose" 
                         value="Cancel" 
                         actionListener="#{fileSearchPersonalizationBean.panelCancel}"
                         immediate="false">
            <f:attribute name="panelId" value="#{formId}:colSettingsPanel" />
        </p:commandButton>
        <p:commandButton styleClass="btn-primary" 
                         id="columnSubmit" 
                         value="Save &amp; Apply" 
                         actionListener="#{fileSearchPersonalizationBean.panelSave}"
                         oncomplete="refreshSearchResults();" >
            <f:attribute name="panelId" value="#{formId}:colSettingsPanel" />
        </p:commandButton>
    </p:outputPanel>
  </p:panelGrid>    

</p:overlayPanel>`
0

There are 0 best solutions below