css - GWT Polymer Vaadin 网格水平滚动条

Question

我正在使用https://github.com/vaadin/gwt-polymer-elements

Vaadingrid真的很好。

这次我对 vaadingrid 的水平滚动条有问题。

如果内容的宽度比浏览器的宽度宽。

在 Macbook（TOUCH PAD）、移动设备上使用时效果很好。（如下图所示）

http://imgur.com/GHyLrUq

但是，在电脑上使用时（用鼠标），它不能滚动。

没有显示默认的水平滚动条。

,,,

我试图设置“可见性：可见”。

http://imgur.com/XwqpPRV

但它总是会被 element.style 覆盖

http://imgur.com/VgUCLuN

希望有人可以帮助我。

Answer 1

我找到了这个修复：

您可以编辑 vaadin-grid.html(位于 /bower_components/vaadin-grid/) 并更改：

.vaadin-grid-tablewrapper {
  box-sizing: border-box;
  overflow: hidden;
  outline: none;
  position: absolute;
  z-index: 5;
}

为了这：

.vaadin-grid-tablewrapper {
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  outline: none;
  position: absolute;
  z-index: 5;
}

这对我有效，因为垂直滚动可以与鼠标滚动一起使用。

我是聚合物新手，我不知道如何从父级修改 css 子元素，这就是原因，因为我正在直接修改 vaadin 源。