[4.0.2a (3)] Custom Theme breaks Scroller

[stevil]

I thought this was code - between 4.0.1 and 4.0.2, the paginggridscroller on a Grid stopped working.

Spent considerable time in the debugger to find that in 4.0.2, with my own theme, that the scroller child DIV (-ct) is positioned nowhere near the actual scroll bar. As a result, when you move the scroller, nothing happens.

This behavior does not take place in 4.0.1, or in 4.0.2 if I use ext-all.css.

Comparing it to my generated theme, I notice the following is in ext-all, but not in my theme:

.x-scroller-ct {
    overflow:hidden;
    position:absolute;
    margin:0;
    padding:0;
    border:none;
    left:0px;
    top:0px;
    box-sizing:content-box !important;
    -ms-box-sizing:content-box !important;
    -moz-box-sizing:content-box !important;
    -webkit-box-sizing:content-box !important
} 

There may be others - I didn't do an exhaustive comparison.

For reference, I cleared my .sass-cache folder and recompiled the theme.

stevil

[stevil]

The following, added to my SCSS file, fixed the scroller (I understand that the colors are going to be variable references - I just didn't have time to track them down, so I extracted the ext-all rules):

.#{$prefix}scroller-ct { 
    overflow:hidden; 
    position:absolute; 
    margin:0; 
    padding:0; 
    border:none; 
    left:0px; 
    top:0px; 
    box-sizing:content-box !important; 
    -ms-box-sizing:content-box !important; 
    -moz-box-sizing:content-box !important; 
    -webkit-box-sizing:content-box !important 
}  

.#{$prefix}vertical-scroller-present .#{$prefix}grid-body {
    border-right-width:0px
}

.#{$prefix}scroller {
    overflow:hidden
}

.#{$prefix}scroller-vertical {
    border:1px solid #99bce8;
    border-top-color:#c5c5c5
}

.#{$prefix}scroller-horizontal {
    border:1px solid #99bce8
}

.#{$prefix}vertical-scroller-present .#{$prefix}scroller-horizontal {
    border-right-width:0px
}

.#{$prefix}scroller-vertical .#{$prefix}scroller-ct {
    overflow-y:scroll
}

.#{$prefix}scroller-horizontal .#{$prefix}scroller-ct {
    overflow-x:scroll
} 

[rdougan]

Very odd. This is defined in scroller.scss, and you should be able to include it using:

@include extjs-scroller;

But this is automatically done for you in _all.scss..

[stevil]

Yeah, it is odd, but if you compare the generated theme to ext-all.css, the rules I added above are missing from the theme.

I also know from a couple (2-4 or so) responses on this/other threads that this workaround fixed scrolling for users whose scrollers "broke" in 4.0.2 (and where reverting to 4.0.1 worked).

Now, with that in mind, it'd be great to have that fixed. Urgency level is low, as the scroller currently works well with this fix to my theme.

Cheers,

stevil