如何将滚动条隐藏在拱顶网格上？

Question

我想隐藏vaadin-grid上的两个滚动条(x和y)，但我找不到一个解决方案。我试着

overflow = hidden

在vaadin-grid、vaadin-grid-outer-scroller、vaadin-grid-scroller、#table、#scroller等许多方面，似乎没有什么效果。

我希望启用滚动，但不希望显示丑陋的滚动条。我怎么才能避开他们？

• vaadin-grid版本: 5.0.0-beta1
• 我用聚合物2.5
• 我想使用css来处理使用自定义主题的样式： ：：主机(theme~=“my-定制网格”){--颜色-灰色-行-选中：#f7f6f6；--彩色-灰色-行-销售级别：#e6e6e6；宽度:600 my；边框:无；边距:0自动；}：theme~=(part~=-自定义网格) part~="cell":not(part~="details-cell") {边框-顶部: none；}：host(theme~=“my-custom”) part~="cell“：：part~=(vaadin-grid-cell-content){填充: 0；主机(theme~=“”)part~=“标头-单元格”：n-子(1n){min-高度: 0；最小宽度:398 1n；最大宽度:398 1n；高度:52 1n；填充:19 1n 11 1n 17 1n；边框-顶部:无黑色；边框-底部:无黑色；字体大小:14 max；字体系列: roboto，sans-serif；字体样式:普通；字体重量: 400；}：主机(theme~=“my-定制网格”)part~=“标头-单元格”：nth-child(2n){min-宽度:104 max；最大宽度:104 max；填充:20 max 12px 17 max 12 max；背景：#c7c7c7；字体大小:13 max；字体系列: roboto，sans-serif；字体样式:普通；字体重量: 500；}：theme~=(“我的-自定义网格”)part~=“标头-单元格”：n-子(3n){min-宽度:98 max；最大宽度:98 max；}：theme~=(part~=“my-custom”) part~="row“{part~=”row:my；}：host(theme~=“my-定制-grid”) part~="row“”part~="body-cell“{边框-右:无黑色；边框-左:无黑色；}：主机(theme~=“my-定制网格”) part~="body-cell“{min-高度: 0；高度:46 max；边框:无黑色；}：主机(theme~=”my-定制网格“)part~=”body-cell“：nth-子(1n){min-宽度:398 max；最大宽度:398 max；填充:13px13px12px；边框-底部: 1px实心#e6e6e6；字体大小:14 1px；字体-家族: roboto，sans-serif；字体样式:普通；字体-重量: 400；}：主机(theme~=“my-定制网格”) part~="body-cell":nth-child(2n) {2n分钟:104 1px；最大宽度:104 6px；填充:12 6px 6Px 13 6px；文本对齐:右；背景: rgba(230,230,230,0.4)；字体大小:12 6px；字体-家族: roboto，无衬线；字体样式:普通字体；字体-重量: 500；}：主机(theme~=“my-custom”) part~="body-cell":nth-child(3n) {最小宽度:98 my；最大宽度:98 my；填充:10 my 17 my 12 my；字体大小:12 my；字体-系列: roboto，sans-serif；字体-样式:普通；字体-重量: 500；}：主机(theme~=“my-custom”) part~="body-cell":nth-child(3n) {字体大小:12 3n；字体-家族: roboto，sans-serif；字体样式:普通；字体重量: 500；} :host(theme~="my-custom-grid":not(reordering)) part~=“行”part~="body-cell":not(part~="details-cell"):nth-child(2n) {背景: linear-gradient(var(--color-grey-row-salesrank)，var(--颜色-灰色-行-销售级)重复；} :host(theme~="my-custom-grid":not(reordering)) part~=“行”“part~=”体-单元格:不(part~=“详细信息-单元格”){背景: linear-gradient(var(--color-grey-row-selected)，var(--颜色-灰色-行-选定)重复；}

Answer 1

解决方案：

:host([theme~="my-custom-grid"]) {
    display: block;
    height: auto;
}

:host([theme~="my-custom-grid"]) #fixedsizer,
:host([theme~="my-custom-grid"]) #outerscroller {
    display: none;
}

:host([theme~="my-custom-grid"]) #table {
    overflow: hidden;
}

Answer 2

vaadin有两个同时具有滚动条的容器元素，因此我们必须隐藏两个滚动条。

试着做下一个：

#table {
    right: -15px;   //we can't set overflow:hidden here as we'll can't to scroll
}

#outerscroller {
    right: -15px;   // and here too
}

#scroller {
    left: -15px;
    overflow: hidden;
}

vaadin-grid {
    overflow: hidden;
}

这只适用于垂直滚动条，所以您需要做同样的事情来隐藏水平滚动。祝好运!

Answer 3

我以编程方式在就绪事件上执行了以下操作：

var grid = this.shadowRoot.querySelector('#reportGrid');// your id

grid.$.table.style.overflowX="hidden";

希望它能有所帮助，因为我正变得疯狂尝试模板风格。