[CLOSED] gridpanel scrollbar width

  1. #1

    [CLOSED] gridpanel scrollbar width

    Is there currently a way of reducing the width of a scrollbar within a gridpanel?
    Last edited by fabricio.murta; Sep 26, 2019 at 5:08 PM.
  2. #2
    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.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Thanks Geoffrey...

    JohnB
  4. #4
    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:

    .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;
    }
    Then again, this will only work on google Chrome. MS-Edge, Firefox (and probably Safari, not tested), will still display the original scrollbar.

    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:

    <ViewConfig runat="server">
        <Listeners>
            <Render Handler="item.el.dom.setAttribute('data-simplebar', ''); debugger;" />
        </Listeners>
    </ViewConfig>
    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.

    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!
    Last edited by fabricio.murta; Sep 23, 2019 at 7:57 PM.
  5. #5
    Thanks Fabrico,

    Works well on Chrome...
    I will have a look for third party options to allow for other browsers

    JohnB
  6. #6
    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.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 7
    Last Post: May 21, 2017, 9:19 PM
  2. Replies: 2
    Last Post: Jan 31, 2013, 5:56 PM
  3. Replies: 1
    Last Post: Jun 11, 2012, 12:59 PM
  4. Replies: 6
    Last Post: Jun 11, 2010, 1:47 PM
  5. Replies: 4
    Last Post: Aug 04, 2009, 12:37 PM

Tags for this Thread

Posting Permissions