How to hide the scrollbars on a vaadin-grid?

Question

I want to hide both scrollbars (x and y) on the vaadin-grid but I cant find a working solution for that. I tried to set

overflow = hidden

on the vaadin-grid, vaadin-grid-outer-scroller, vaadin-grid-scroller, #table, #scroller, and many more but nothing seems to have a effect.

I want the scrolling to be enabled but I do not want the ugly scrollbars to be shown. How can I avoid them?

vaadin-grid version: 5.0.0-beta1
I use polymer 2.5

I want to use css to handle the styling using a custom theme:

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

Hi. Dont know why you need a fiddle for a simple grid with a scrollbar but as you wish :) https://jsfiddle.net/2aj4vtyt/1/ — Mulgard, Mar 03 '18 at 19:22

score 1 · Accepted Answer · answered Mar 06 '18 at 14:15

Solution:

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

score 0 · Answer 2 · answered Mar 04 '18 at 19:56

vaadin-grid has two container elements with scrollbar at the same time, so we have to hide two scrollbars.

Try to do next:

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

This is only for vertical scrollbar, so you will need to do the same things to hide horizontall scroll. Good luck!

even though this solution is hacky and not `clean` I tried it.... and it had no effect at all. — Mulgard, Mar 05 '18 at 08:41

score 0 · Answer 3 · answered Sep 25 '19 at 15:49

0

I did it programmatically on the ready event by doing:

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

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

hope it could help because I was becoming crazy trying with the template style.

answered Sep 25 '19 at 15:49

Salvatore Pannozzo Capodiferro

1,121
12
20

How to hide the scrollbars on a vaadin-grid?

3 Answers3