p: selectOneMenu dropdown part scrollt und bleibt nicht in Position

Question

Ich benutze PrimeFaces 5.0.5 mit GlassFish Server 3.1.2.2.

Ich habe ein selectonemenu innerhalb einer <ui:fragment> hinzugefügt, die dann in einer anderen XHTML-Seite enthalten ist.

Wenn ich das Auswahlmenü öffne und mit dem Mausrad blättere, schwebt das Panel mit der Seite.

Zunächst versuche ich, die CSS-Datei zu bearbeiten, da ich vermutete, dass es ein Positionsproblem sein könnte, aber es ist nicht.

Dann kopierte ich den Quellcode aus der Vitrine und das Panel spaltet immer noch beim Scrollen.

Sowohl einfache HTML-Dropdown-Liste und <h:selectOneMenu> sind in Ordnung, und ich habe keine Ahnung, warum es nicht funktioniert mit <p:selectOneMenu>.

Ich kann einige Posts finden, die dieses Problem erwähnen, aber sie sind mit älteren Versionen von PrimeFaces verwandt.

Ist das Problem immer noch vorhanden oder in 505 behoben? Wenn ja, wie kann ich dieses Problem lösen?

Alle Rückmeldungen und Kommentare sind willkommen.

Vielen Dank.

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> 
      ... 

Grüßen, Rek

Answer 1

Die Sache ist, dass dieser Floating divs mit absoluter Positionierung geschaffen werden, und wenn Sie Layouts oder Dialoge oder Dinge, die den Fluss der Seite brechen, Diese p:selectOneMenu "Panels" bleiben in derselben absoluten Position, auch wenn Sie das Layout oder den Container scrollen, da sie standardmäßig an den Körper angehängt sind.

So ein Weg, dies zu lösen, würden sie sich anschließen, so die absolute Platte in der Strömung der Seite auf das Auswahl nächste erscheint und mit den „Inneren scrollings“ bewegt sich nicht:

<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> 

Verwenden des Attributs appendTo:

Hängt das Overlay an das durch Suchausdruck definierte Element an. Standardmäßig wird der Textkörper formatiert.

Answer 2

Sie können panelStyle = "position: fixed;" in selectOneMenu