我想隐藏两个滚动条(x 和 y),vaadin-grid
但我找不到可行的解决方案。我试图设置
overflow = hidden
在vaadin-grid
, vaadin-grid-outer-scroller
, vaadin-grid-scroller
, #table
, #scroller
, 等等,但似乎没有任何效果。
我希望启用滚动,但我不希望显示丑陋的滚动条。我怎样才能避免它们?
- vaadin-grid 版本:5.0.0-beta1
- 我使用聚合物 2.5
我想使用 css 来处理使用自定义主题的样式:
<dom-module id="my-custom-grid" theme-for="vaadin-grid"> <template> <style> :host([theme~="my-custom-grid"]) { --color-grey-row-selected: #f7f6f6; --color-grey-row-salesrank: #e6e6e6; width: 600px; border: none; margin: 0 auto; } :host([theme~="my-custom-grid"]) [part~="cell"]:not([part~="details-cell"]) { border-top: none; } :host([theme~="my-custom-grid"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) { padding: 0; } :host([theme~="my-custom-grid"]) [part~="header-cell"]:nth-child(1n) { min-height: 0; min-width: 398px; max-width: 398px; height: 52px; padding: 19px 11px 17px; border-top: none black; border-bottom: none black; font-size: 14px; font-family: roboto, sans-serif; font-style: normal; font-weight: 400; } :host([theme~="my-custom-grid"]) [part~="header-cell"]:nth-child(2n) { min-width: 104px; max-width: 104px; padding: 20px 12px 17px 12px; background: #c7c7c7; font-size: 13px; font-family: roboto, sans-serif; font-style: normal; font-weight: 500; } :host([theme~="my-custom-grid"]) [part~="header-cell"]:nth-child(3n) { min-width: 98px; max-width: 98px; } :host([theme~="my-custom-grid"]) [part~="row"] { border: none black; } :host([theme~="my-custom-grid"]) [part~="row"][selected] [part~="body-cell"] { border-right: none black; border-left: none black; } :host([theme~="my-custom-grid"]) [part~="body-cell"] { min-height: 0; height: 46px; border: none black; } :host([theme~="my-custom-grid"]) [part~="body-cell"]:nth-child(1n) { min-width: 398px; max-width: 398px; padding: 13px 13px 12px; border-bottom: 1px solid #e6e6e6; font-size: 14px; font-family: roboto, sans-serif; font-style: normal; font-weight: 400; } :host([theme~="my-custom-grid"]) [part~="body-cell"]:nth-child(2n) { min-width: 104px; max-width: 104px; padding: 12px 6px 13px; text-align: right; background: rgba(230,230,230,0.4); font-size: 12px; font-family: roboto, sans-serif; font-style: normal; font-weight: 500; } :host([theme~="my-custom-grid"]) [part~="body-cell"]:nth-child(3n) { min-width: 98px; max-width: 98px; padding: 10px 17px 12px; font-size: 12px; font-family: roboto, sans-serif; font-style: normal; font-weight: 500; } :host([theme~="my-custom-grid"]) [part~="body-cell"]:nth-child(3n) { font-size: 12px; font-family: roboto, sans-serif; font-style: normal; font-weight: 500; } :host([theme~="my-custom-grid"]:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]):nth-child(2n) { background: linear-gradient(var(--color-grey-row-salesrank), var(--color-grey-row-salesrank)) repeat; } :host([theme~="my-custom-grid"]:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) { background: linear-gradient(var(--color-grey-row-selected), var(--color-grey-row-selected)) repeat; } </style> </template>