Is there currently a way of reducing the width of a scrollbar within a gridpanel?
Printable View
Is there currently a way of reducing the width of a scrollbar within a gridpanel?
Hi johnb,
The scrollbars are being rendered by the browser, so I don't think there are many options. Depending on the browser, I believe css can modify some properties, such as colour, but to the best of my knowledge, not width.
I'll dig around to see if I can find anything that might help.
Thanks Geoffrey...
JohnB
Hello!
I have done some research and, although not impossible, this is unfortunately not supported out-of-the box.
If you rely your application purely on google chrome (or other webkit-based-rendering browser), there is some level of CSS styling support for scrollbars. Here's a sample of what you can modify in the looks of the scrollbar of grid panels thru CSS:
Then again, this will only work on google Chrome. MS-Edge, Firefox (and probably Safari, not tested), will still display the original scrollbar.Code:.x-grid-view::-webkit-scrollbar {
width: 50px
}
.x-grid-view::-webkit-scrollbar-button {
background-color: blue
}
.x-grid-view::-webkit-scrollbar-thumb {
background-color: tan;
}
.x-grid-view::-webkit-scrollbar-track-piece {
background-color: orange;
}
It is possible though, to use custom, javascript-aided implementations of scrollbars. As I see, basically the implementations around require a specific HTML attribute string to the DOM element in order to trigger the feature.
The following article from Chris Coyier gives some explanation on how to customize scrollbars, talks about restrictions, and also suggests a couple third-party solutions: The Current State of Styling Scrollbars.
For instance, if we want to enable the simple-scrollbar (mentioned in the article above) in a grid panel; just create the data-simplebar attribute in the grid view's DOM element, adding a block like this to the grid definition:
And, of course, inserting the javascript + css required by the solution you chose. From that point, you may customize it the way you need. And now it's up to understanding the chosen solution's API via its respective documentation.Code:<ViewConfig runat="server">
<Listeners>
<Render Handler="item.el.dom.setAttribute('data-simplebar', ''); debugger;" />
</Listeners>
</ViewConfig>
There may be an issue if you need the scrollbar thinner than around 15 pixels where a blank space between the last column and itself. That's because Ext.NET "reserves" a space to let the usual scrollbars show nicely (otherwise the other axis' one will always show up, because of the space it takes in the viewport). If you fall into this, we can discuss possible solutions.
Hope this helps!
Thanks Fabrico,
Works well on Chrome...
I will have a look for third party options to allow for other browsers
JohnB
Hello @johnb!
I hope this helped you get started to having that work the way you need. I'm sorry that's not really straightforward, as scrollbars are still kind of a fight between browsers.
We're marking this as closed for now, but feel free to post back if you have further inquiries in this topic, or open a new thread in case you got a good progress and became stuck in something specific.