CODEWITHSUNDEEP
javascriptjqueryjscrollpanejquery-jscrollpane
georgeatgrayson
georgeatgrayson

Reputation: 11

jScrollPane Scrollbar not shown when used with nav

I have been successfully using jScrollPane in a number of applications where it has been working perfectly. Running the plugin creates two additional divs around the content with classes of jspContainer and jspPane and a third div for the scrollbar.

However when I try to use it with a flyPanels plugin (https://github.com/SubZane/flyPanels), the only div the 'scroll-pane' class can be added to, to give any result is the div directly above the nav. When the code is created on the page, I found that while the nav inside this div was surrounded by the appropriate jspContainer and jspPane divs, it was missing the separate div for the scrollbar itself.

I'm wondering whether it might be as a result of being placed around a nav, or a problem with the height and width of the div the class is on. Either way I have searched as many stackoverflow questions and the github forum for issues as much as I can bear, but all questions are either irrelevant or lacking in an answer.

I've included the main part of the code, but the header is missing so I assure you that I have included jQuery 1.9.1 and the correct javascript and css files (as the same ones worked on a separate project).

<div class="flypanels-container preload">

    <div class="offcanvas flypanels-left">
        <div class="panelcontent scroll-pane" data-panel="treemenu">
            <nav class="flypanels-treemenu" role="navigation">
                        ...
                        <!-- Unordered list containing several sublists -->
                        ...
            </nav>
        </div>
    </div>
    <div class="flypanels-main">
        <div class="flypanels-content">
            <!-- Some additional code -->

        </div>
    </div>
</div>

Has anyone got any experience of using these two plugins together and if so does anyone have any clue as to how this can be resolved?

Upvotes: 1

Views: 82

Answers (1)

VVV
VVV

Reputation: 7593

I haven't used flypanels but I did integrate jscrollpane many times. If my memory is correct, jscrollpane needs to be visible on screen (not hidden) when it's initialized. If not, it will have a height of 0 thus "not working".

Try this

  1. Don't hide the sublist items
  2. Initialize jscrollpane
  3. Hide sublist items.

Upvotes: 0

Related Questions