blazor-docs/knowledge-base/grid-hide-vertical-scrollbar.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to Remove the Vertical Grid Scrollbar	How to hide the vertical scrollbar of the Grid and TreeList with CSS, if scrolling is not used.	how-to	How to Hide the Vertical Grid Scrollbar	grid-hide-vertical-scrollbar		grid, treelist, scroll, scrollbar, scrolling	1541813, 1541728	kb

Environment

Product

Grid for Blazor, TreeList for Blazor

Description

How do I hide the Grid vertical scrollbar? I don't set the Grid Height, so I prefer to completely remove the disabled vertical scrollbar with CSS.

Solution

There are three required CSS styles to disable vertical scrolling and ensure proper cell alignment between the header, data and footer area of the Grid/TreeList:

1. Remove the vertical scrollbar, which is visible by default.
2. Remove the empty space above and below the vertical scrollbar. These empty spaces are in the header and footer area.
3. Remove two right borders in the header and footer area, which are no longer necessary. These borders normally separate the empty spaces from the header and footer cells.

Notes

• Do not set the component Height attribute. Do not apply height style to the component <div>. Doing so may show the vertical scrollbar back and cause misalignment between the header cells and data cells.
• Versions 2.26 and older require !important for the padding style.
• The exact same classes and styles will work for the TreeList as well.

caption Hide the Grid/TreeList vertical scrollbar

@* Hide the vertical scrollbar of the Grid *@

<TelerikGrid Data="@GridData" Class="grid-no-scroll">
    <GridColumns>
        <GridColumn Field=@nameof(Product.Name) Title="Product Name">
            <FooterTemplate>
                footer
            </FooterTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<style>
    .grid-no-scroll .k-grid-content {
        overflow-y: auto;
    }

    .grid-no-scroll .k-grid-header,
    .grid-no-scroll .k-grid-footer {
        padding-right: 0; /* version 2.26 and older requires !important here */
    }

    .grid-no-scroll .k-grid-header-wrap,
    .grid-no-scroll .k-grid-footer-wrap {
        border-right-width: 0;
    }

</style>

@code {
    List<Product> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        for (int i = 1; i <= 5; i++)
        {

            GridData.Add(new Product()
            {
                ID = i,
                Name = "Product " + i.ToString()
            });
        }
    }

    public class Product
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}