Как скрыть полосы прокрутки на vaadin-сетке?

Question

Я хочу скрыть обе полосы прокрутки (х и у) на vaadin-grid но я не могу найти рабочее решение для этого. Я пытался установить

overflow = hidden

на vaadin-grid, vaadin-grid-outer-scroller, vaadin-grid-scroller, #table, #scrollerи многое другое, но, похоже, ничего не дает эффекта.

Я хочу, чтобы прокрутка была включена, но я не хочу, чтобы показывались уродливые полосы прокрутки. Как я могу избежать их?

• vaadin-grid версия: 5.0.0-бета1
• Я использую полимер 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>
  

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

Я сделал это программно в готовом событии, выполнив:

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

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

Надеюсь, это может помочь, потому что я сходил с ума, пытаясь использовать стиль шаблона.

Answer 3

vaadin-grid имеет два элемента контейнера с полосой прокрутки одновременно, поэтому мы должны скрыть две полосы прокрутки.

Попробуйте сделать следующее:

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

Это только для вертикальной полосы прокрутки, поэтому вам нужно будет сделать то же самое, чтобы скрыть горизонтальную прокрутку. Удачи!