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?
Setting the doubleHorizontalScroll 'options' property to true worked for me. Reference
options = {{
doubleHorizontalScroll: true
}}
You can modify it, via inspect elements, and find the specific class
Example
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;
}
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.
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;
}
}
