p: selectOneMenu parte a discesa scorre e non rimane in posizione

Question

Sto utilizzando PrimeFaces 5.0.5 con il server GlassFish 3.1.2.2.

Ho aggiunto un selectonemenu all'interno di uno <ui:fragment> che è quindi incluso in un'altra pagina XHTML.

Quando si apre il menu di selezione e si scorre con la rotellina del mouse, il pannello galleggia con la pagina.

Inizialmente, provo a modificare il file CSS perché pensavo che potesse essere un problema di posizione, ma non lo è.

Quindi, ho copiato il codice sorgente dalla bacheca e il pannello si divide ancora durante lo scorrimento.

Sia il semplice elenco a discesa HTML che <h:selectOneMenu> vanno bene e non ho idea del motivo per cui non funziona con <p:selectOneMenu>.

Sono in grado di trovare alcuni post che menzionano questo problema ma sono correlati alla versione precedente di PrimeFaces.

Il problema è ancora presente o risolto in 505? Se sì, come posso risolvere questo problema?

Qualsiasi commento e commento sono apprezzati.

Molte grazie.

p:selectOneMenu dropdown not attached to the component inside a dialog

<ui:fragment 
xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:c="http://java.sun.com/jsp/jstl/core" 
xmlns:p="http://primefaces.org/ui"> 
<h:panelGroup 
    id="cPanel" 
    layout="block" 
    styleClass="contentArea product"> 
    <div class="mainColumnContainer"> 
     <div class="mainColumn"> 
      ... 
      <div id="try"> 
      <form> 
         ... 
       <h:panelGroup> 
       <h:form> 
       <p:messages autoUpdate="true" /> 

       <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"> 
        <p:outputLabel for="console" value="Basic:" /> 
        <p:selectOneMenu id="console" value="#{selectOneMenuView.console}"> 
         <f:selectItem itemLabel="Select One" itemValue="" /> 
         <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> 
         <f:selectItem itemLabel="PS4" itemValue="PS4" /> 
         <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> 
        </p:selectOneMenu> 

        <p:outputLabel for="car" value="Grouping: " /> 
        <p:selectOneMenu id="car" value="#{selectOneMenuView.car}"> 
         <f:selectItem itemLabel="Select One" itemValue="" /> 
         <f:selectItems value="#{selectOneMenuView.cars}" /> 
        </p:selectOneMenu> 

        <p:outputLabel for="city" value="Editable: " /> 
        <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true"> 
         <f:selectItem itemLabel="Select One" itemValue="" /> 
         <f:selectItems value="#{selectOneMenuView.cities}" /> 
        </p:selectOneMenu> 

       </h:panelGrid> 
      ... 

saluti, Rek

Answer 1

Il fatto è che questi div galleggianti sono creati con posizionamento assoluto, e quando si ha layout o le finestre di dialogo o cose che si rompono il flusso della pagina, questi "pannelli" p:selectOneMenu rimangono nella stessa posizione assoluta anche se si scorre il layout o il contenitore, poiché per impostazione predefinita sono collegati al corpo.

Quindi un modo per risolvere questo sarebbe per il fissaggio a se stessi in modo che il pannello di assoluta appare accanto al selezionate nel flusso della pagina e non si muove con quelle "scrollings dentro":

<p:selectOneMenu id="console" value="#{selectOneMenuView.console}" appendTo="@this"> 
    <f:selectItem itemLabel="Select One" itemValue="" /> 
    <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> 
    <f:selectItem itemLabel="PS4" itemValue="PS4" /> 
    <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> 
</p:selectOneMenu> 

Utilizzo dell'attributo appendTo:

Aggiunge l'overlay all'elemento definito dall'espressione di ricerca. Per impostazione predefinita sul corpo del documento.

Answer 2

È possibile utilizzare panelStyle = "position: fixed;" in selectOneMenu