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

Question

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

Vaadingrid 真的很好。

这次遇到vaadingrid水平滚动条的问题

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

在 Macbook(TOUCH PAD)、移动设备上使用时，它工作正常。(如下图)

http://imgur.com/GHyLrUq

但是在电脑上使用时(鼠标)，不能滚动。

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

,,,

我尝试设置“visibility: visible”。

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

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

我是 Polymer 的新手，我不知道如何从父元素修改 css 子元素，这就是我直接修改 vaadin 源代码的原因。