JSF select Primefaces selectOneMenu inside dialog

Question

View:

<p:dialog header="Search in code tables" widgetVar="dlg" resizable="true">
    <p:selectOneMenu id="tableId" value="#{xxx.tableId}"
                        required="true" label="tableId">
                    <f:selectItems value="#{xxx.tables}" ></f:selectItems>
                    </p:selectOneMenu>

The z-index for the dialog causes the menu options to hide behind it.

I am following standard example from Primefaces showcase:

http://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml

This appears to be a know n issue http://forum.primefaces.org/viewtopic.php?f=3&t=33972

Can someone suggest a proper fix.

Answer 1

Try to use panelStyle for selectOneMenu. Using appendTo = "@this" may cause something like this: You could use panelStyle = "position:fixed" instead. Regards.

Answer 2

okay I have managed to figure this out.

I was missing a appendTo telling which component to append the select:

<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
            required="true" label="tableId" appendTo="@this" >

This fixes the z-index as well as adding a scrollbar to the drop down.

I have not been able to find this anywhere so posting this self answer.