0

I am using Primefaces 6.2. When placing a selectbox inside a dialog and open it, it will scroll along the main page.

To avoid that, i've added appendTo="@(this)". With this change the scrolling works correctly, but if the height of the dropdown overflows the dialog height, automatically scrollbards are created for the dropdown and the dialog.

Example:

<p:dialog widgetVar="eventDialog" >
   <p:selectOneMenu id="dummy" value="Selection" appendTo="@(this)">
      <f:selectItems value="selection 1" />
      <f:selectItems value="selection 2" />
   </p:selectOneMenu>
</p>

To avoid the scrollbars and let the dropdown overflow i've tried panelStyle="position:fixed" instead of appendTo="@(this)". With this solution i have the problem, that the dropdown is not visible if i have a big page and scrolld down to the bottom, open the dialog and click on the dropdown.

Example:

<p:dialog widgetVar="eventDialog" >
   <p:selectOneMenu id="dummy" value="Selection" panelStyle="position:fixed">
      <f:selectItems value="selection 1" />
      <f:selectItems value="selection 2" />
   </p:selectOneMenu>
</p>

By the way i found the two solutions in the post "p:selectOneMenu dropdown part scrolls and does not stay in position".

Dennis F.
  • 428
  • 4
  • 15
  • Try `appendTo=""` it might work – Kukeltje Dec 12 '18 at 19:45
  • I just saw you ended up asking this question for a third problem with selects, but this one I cannot reproduce it. One thing... I'm guessing it's a typo from trying to hide production code, but your examples have some things wrong, like closing with just , or having f:selectItems with just a string value. – mrganser Mar 10 '19 at 20:18

0 Answers0