I have a problem with p:selectOneMenu component, which is rendered into p:dataTable. In fact, the table contains such a component in every row. The table isn't placed in the dialog. It does not take up the entire page height, it is scrollable.
When I open a dropdown and then scroll through the table, the dropdown still stays in the same position on the screen, instead of scrolling along with the rest of the table contents. There's no such problem if I scroll the entire page instead of the table.
While checking other questions of this, I tried to "stick" the p:selectOneMenu to various others using a appendTo tag. Back then, indeed, the dropdown was scrolling along with the entire table, but... it was not visible. In the browser developer tools, I was able to see that the dropdown-list items are rendered but for some reason not visible - only the top filter bar is visible. I've also seen suggestions to use panelStyle attribute, but there were no effects.
How can I fix this problem so that the entire table scrolls correctly? I'm using Primefaces 6.1 and can't use any other version. My code looks something like this:
<ui:define name="content">
...
<h:form id="myForm">
<div class="ui-g-12" style="margin-top: 25px;">
<p:dataTable id="myTable" widgetVar="myTable"
scrollable="true" scrollHeight="300">
...
<p:column id="myColumn">
<p:selectOneMenu id="myItem" widgetVar="item#{table.rowIndex}"
filter="true" filterMatchMode="contains"
style="display: block; margin-top: 15px; margin-right: 15px; width: 520px;">
<f:selectItem id="selectItemEmpty3" itemLabel="blahblah" itemValue="" />
<f:selectItems id="myItems" value="#{bean.getValue()}" />
...
</p:selectOneMenu>
</p:column>
...
</p:dataTable>
</div>
</h:form>
...
</div>
...
</ui:define>
