JavaScript jScrollPane not initializing correctly, not showing up in DOM tree fully

Question

I'm trying to initialize a jScrollPane in a jQuery widget. Mainly because i need to style the scrollbar for Firefox. The problem is that its not initializing correctly.

The code is exactly the same as in another widget we use. In there everything works. The problem is that, when you inspect the page, the DOM tree contains the jspContainer and jspPane elements. However, the scrollable-snoozetimes-list does not contain the class jspScrollable and the div jspVerticalBar is missing entirely.

_renderOverview: function(snoozeTimes) {
    var snoozeTimesList = this.element.find('.scrollable-snoozetimes-list');
    snoozeTimesList.jScrollPane();

    var contentPane = this._getContentPane().empty();

    for (var i = 0; i < snoozeTimes.length; ++i) {
        contentPane.append($.tmpl('snoozeTimeMarkup', snoozeTimes[i])[0].outerHTML);
    }

    this._adjustJScrollPaneHeight(snoozeTimes.length);
    var jScrollPane = snoozeTimesList.jScrollPane().data('jsp');
    jScrollPane.reinitialise();
}

_getContentPane: function () {
    var resultContainer = this.element.find('.scrollable-snoozetimes-list');
    var jScrollPane = resultContainer.data('jsp');
    return jScrollPane.getContentPane();
}

Any idea what i'm missing here?

score 0 · Accepted Answer · answered Aug 06 '19 at 12:11

The html to which this code appends the jScrollPane must be visible.

In some cases, you can append widgets to templates without them having been rendered out. In the case for this particular version of jScrollPane, you must do it after the html is rendered AND made visible. This is why the dom tree for the pane only partially generates.

JavaScript jScrollPane not initializing correctly, not showing up in DOM tree fully

1 Answers1