1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default Unanswered: Changing appearance like color width,... of Scrollbar

    Unanswered: Changing appearance like color width,... of Scrollbar


    Heyho people,


    I'm having a TreeGrid, for which a scroll bar appears, when it gets too big.
    This works really nice with GXT Just fix the height and it'll scrollable.
    As I'm new to CSS and Webstylings, the more tricky part for me is concerned with styling the scroll bar. So for me its even not sure, if this is the right question, for this forum. If not please tell me

    The current non-working trial to accomplish this looks like the following:

    Code:
    //setting the classname for the scrollable grid
    this.processContentTreeGrid.setStylePrimaryName("instanceGridButtonTriggered");
    
    
    //setting the css properties for changing the scroll bar appearance
    .instanceGridButtonTriggered::-webkit-slider-thumb:vertical {
        background-color: #000000;
        width: 50px;
    }

    Is it generally possible in GXT to customize the scroll bar's? If yes how?
    Does this have to be done purely with CSS (and if so, any hint how to?)?



    Greetz and a nice day to all
    Stefan

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default Second trial

    Second trial


    In addition to the above trial a second trial was accomplished. The GridAppearance was customized too. In the GridAppearance a CSS-class, named .scroller is defined for the scrollable element.

    I tried this too, withouth any success:

    Code:
    .scroller::-webkit-slider-thumb {
        background-color: #000000 !important;
        width: 50px;
    }

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    89
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Code:
    this.processContentTreeGrid.setStylePrimaryName("instanceGridButtonTriggered");
    Did you read the javadocs for that method? I don't think it does what you think it does. Try addStyleName instead.

    Code:
    .scroller::-webkit-slider-thumb {...}
    Is this in a CssResource in your app? If not, that class name will be obfuscated when it is used, and since your css isn't, you class won't apply. This CssResource belongs in a new appearance, extending from the Grid's default appearance.

    Other options: get a reference to the scroller object and add an additional css class name that matches your css (something like grid.getView().getScroller()).

Thread Participants: 1