SpringLearner
SpringLearner

Reputation: 13844

adding cross browser jscrollpane not working

Hi I am using this to change the default scroll-bar and this is the fiddle In the fiddle I am writing this <div class="scroll-pane horizontal-only">(line number 122 in html section) to change the default scroll bar but If i write this then the whole div disappears.This shows before use of jscrollpane.

this is the jquery

$(function()
            {
                $('.scroll-pane').jScrollPane();
            });

Line number 213 in js section and this is the css

/* Styles specific to this particular page */
            .scroll-pane
            {
                width: 100%;
                height: 200px;
                overflow: auto;
            }
            .horizontal-only
            {
                height: auto;
                max-height: 200px;
            }

Line number 118 in the css section

Upvotes: 0

Views: 142

Answers (2)

anpsmn
anpsmn

Reputation: 7257

As @Era said jScrollpane is having a height: 0, it's not getting what the height of the parent is as the tab is hidden on load.

I changed the code such that it executes only after the tab is visible.

<a id="userlink" href="#tab2" data-toggle="tab">Users</a>

$('body').on('shown', '#userlink', function () {
    if(!$('.scroll-pane').hasClass('jspScrollable')) {
      $('.scroll-pane').jScrollPane();
    }
})

See fiddle

Upvotes: 2

Richa
Richa

Reputation: 4270

In your fiddle, jScrollpane is having height:0 this is because jScrollpane will take the height of parent or as per the parent container. you need to set some height to the parent then only it will show up.

Upvotes: 1

Related Questions