In Sencha Touch 2, how do you make the Scroll Idicators show permanently?

Question

I have been through the Sencha forums and found that other people have asked this question and it was answered. However, I cannot seem to reproduce any solutions. I've tried:

Ext.override(Ext.scroll.indicator.CssTransform, {hide: function() {return false;},initialize:function(){this.show();}});
Ext.override(Ext.scroll.indicator.Default, {hide: function() {return false;},initialize:function(){this.show();}});
Ext.override(Ext.scroll.indicator.ScrollPosition, {hide: function() {return false;},initialize:function(){this.show();}});

and tried:

Ext.override(Ext.util.Scroller.Indicator, {
    hide: function() {
        var me = this;
        if (this.hideTimer) {
            clearTimeout(this.hideTimer);
        }
        return this;
    }
});

These links below are what I'm trying to reproduce. Has anybody had any luck making the scroll bars always show in Sencha Touch 2? And where would one enter the CSS trick in Sencha Architect (discussed in the websites bellow)?

http://www.sencha.com/forum/showthread.php?146621-Making-List-Scroll-Idicators-show-permanently

http://www.sencha.com/forum/showthread.php?151468-Making-scrollbar-visible-all-the-time

Ext.override is deprecated in ST2. You need to use Ext.define with the override config instead. See docs.sencha.com/touch/2.2.0/#!/api/Ext-method-override It might help — Titouan de Bailleul

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-06-15T08:58:08

Try putting this in your apps css file:

.x-scroll-indicator {
    opacity: 0.5 !important;
}

this should always make it visible

In Sencha Touch 2, how do you make the Scroll Idicators show permanently?

1 Answers