首页 > 解决方案 > 展开的 SelectOneMenu 在滚动 DataTable 时保持位置

问题描述

我对p:selectOneMenu组件有疑问,该组件呈现为p:dataTable。实际上,该表的每一行都包含这样一个组件。该表未放置在对话框中。它不占用整个页面高度,它是可滚动的。

当我打开一个下拉列表然后滚动表格时,下拉列表仍然停留在屏幕上的相同位置,而不是与表格的其余内容一起滚动。如果我滚动整个页面而不是表格,则没有这样的问题。

在检查其他问题时,我尝试使用appendTo标记将p:selectOneMenu “粘贴”到其他各种问题上。那时,确实,下拉列表与整个表格一起滚动,但是……它不可见。在浏览器开发人员工具中,我能够看到下拉列表项已呈现,但由于某种原因不可见 - 只有顶部过滤器栏可见。我也看到了使用panelStyle属性的建议,但没有效果。

如何解决此问题,以便整个表格正确滚动?我正在使用 Primefaces 6.1,不能使用任何其他版本。我的代码看起来像这样:

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

标签: jsfprimefacesselectonemenuprimefaces-datatable

解决方案


推荐阅读