CODEWITHSUNDEEP
reactjsmaterial-table
Mike K
Mike K

Reputation: 6473

How to change horizontal scroll bar width in Material Table?

Is it possible to change the thickness of the horizontal scroll bar of Material-Table? I've tried adding the scrollBarWidth property and the scrollPadding property to the style prop in the table component, but it didn't work. Is it possible to change the width at all?

enter image description here

Upvotes: 1

Views: 6162

Answers (4)

Jefin Mathew
Jefin Mathew

Reputation: 151

Setting the doubleHorizontalScroll 'options' property to true worked for me. Reference

options = {{
    doubleHorizontalScroll: true
    }}

Upvotes: 1

Galbimandu
Galbimandu

Reputation: 1

Adding this css to the div wrapping my MaterialTable removed the preset scrollbar and replaced it with the styled scrollbar.

* {
overflow-y: clip !important;
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

}

Upvotes: 0

Mike K
Mike K

Reputation: 6473

This isn't a direct answer to my original question, but I managed to set the width of the horizontal scroll bar by overriding the styles of all scrollbars on the page.

Anyway, looks something like this,

::-webkit-scrollbar {
  width: 20px; /* <-- This sets the thickness of the VERTICAL scrollbar */
  height: 20px; /* <-- This sets the thickness of the HORIZONTAL scrollbar */
}

I should note, that this doesn't work in Firefox or IE/Edge.

Edit nervous-glitter-1j0xc

Upvotes: 0

Marc Kenneth Lomio
Marc Kenneth Lomio

Reputation: 439

You can modify it, via inspect elements, and find the specific class

Example enter image description here

by putting css in your material table class in elements; you'll see it early the result without reloading the pages .

and if you put it to the code use :host ::ng-deep to reflect your changes.

Example

:host ::ng-deep .mat-menu-panel {
    min-width: 112px;
    max-width: 400px;
    overflow: auto;
 }

Upvotes: 0

Related Questions