移动设备上带有分页控件的 vaadin 网格高度

Question

我正在使用堆叠在分页工具栏 (vaadin-grid-pagination) 上的 vaadin-grid，我遇到的问题是在移动设备上，分页不位于底部视口作为网格覆盖它。

理想情况下（忽略分页溢出）它看起来像这样：

现在，通过 Dev Tools 检查器，我能够从滚动条中删除一个 position: relative 属性，这让事情按照我想要的方式运行。

问题是我无法以编程方式执行此操作...我尝试使用包含以下内容的自定义 css 文件：

:host() #scroller {
      width: 100%;
      height: 100%;
      position: absolute;
    }

并在构建网格的视图中使用它：

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")

不过好像没什么区别

不确定正确的方法是什么，如果有的话。

Answer 1

#1 尝试使用 !important ?

设置位置值

:host() #scroller {
      width: 100%;
      height: 100%;
      position: absolute!important; /* add !important */
    }

#2 否则就像我建议的那样你可以使用 JS 注入它（这里 jQuery）。

$('#scroller').css('position','absolute');

确保将该 JS 代码片段插入到加载链的尽头。

Answer 2

您不应修改组件的内部样式。不能保证它们现在或将来仍然 behave/function 正确。 #scroller 选择器是 <vaadin-grid> 组件的私有实现细节的一部分。

你唯一应该设置样式的 CSS 选择器是 :host 和 [part]，它们可以与原生伪类（:hover，等）、伪元素（::before、::after 等）和记录的状态属性（[disabled]、[active] 等）。详细了解 supported selectors.

我怀疑 <vaadin-crud> 组件上的 height: 100% 导致它过高。您应该尝试在其上使用 flex: 1。

vaadin grid height with pagination controls on mobile devices