CODEWITHSUNDEEP
javascriptjqueryhtmlslimscroll
Leon van der Veen
Leon van der Veen

Reputation: 1672

slimscroll scrollbar is not visible

I'm using the slimscroll plugin but i'm having a problem with the scrollbar is not visible.

My code:

 <script type="text/javascript" charset="utf-8">
    // JavaScript Document
    $(document).ready(function()
    {
        $("#formActions").slimScroll({
            height: '400',
            color: '#00f',
            alwaysVisible: true
        });
    });
</script>

HTML:

<div class="content" style="height:400px;">
<div id="formActions">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus diam, gravida sit amet lobortis vel, vehicula in nisl. Mauris commodo tristique adipiscing. Ut ac odio ut leo molestie rhoncus id ac sem. Duis interdum neque ligula, aliquet scelerisque urna tincidunt sit amet. Donec dapibus ultrices velit. Aliquam eleifend pretium neque, in adipiscing tortor malesuada sit amet. Proin mattis erat quis hendrerit sodales. Ut tincidunt consequat lorem, ut sodales purus gravida nec. Morbi mollis dolor quis dapibus lacinia. Nulla ultricies velit ut porta varius. Vestibulum ac egestas lacus.

Praesent id ultrices felis, ut porttitor nunc. Maecenas quis leo laoreet, laoreet enim eget, euismod libero. Morbi viverra laoreet mollis. Mauris sit amet ultrices sapien. Praesent et malesuada purus, et ornare orci. Mauris accumsan enim tincidunt, eleifend enim vitae, dictum enim. Duis eleifend vehicula metus, vitae eleifend leo imperdiet id. Quisque hendrerit venenatis quam eget egestas. Suspendisse faucibus in sapien sit amet malesuada. Vivamus id neque varius, volutpat velit id, viverra ligula. Duis convallis nisl eu sapien fringilla porta. Curabitur cursus nisl quis tortor porttitor, non volutpat sapien rhoncus. Maecenas tincidunt sem ligula. Duis tellus enim, volutpat sed mollis eu, faucibus sit amet leo. Maecenas volutpat mauris dolor, sed auctor ligula aliquam eget. Proin tincidunt ornare lacus, ac egestas mauris scelerisque sit amet.

Mauris sit amet diam magna. Sed rhoncus erat ac tortor imperdiet porta. Proin et nulla sed quam posuere pulvinar quis id mi. Vestibulum mollis elementum metus et sagittis. Nunc vel luctus neque. Mauris ac neque orci. Sed suscipit augue quis convallis vulputate. Duis laoreet libero a eros rhoncus, ac congue libero egestas. Mauris ac purus eget urna convallis aliquam a sit amet quam. Mauris mi erat, egestas nec dignissim sed, vulputate sit amet dolor. Pellentesque auctor nibh eget diam rutrum dictum. Praesent porttitor orci ante, ac hendrerit lacus hendrerit vel. Suspendisse sodales est sed ipsum mollis, eget tempus tellus laoreet. Phasellus vehicula congue sem at mattis. Vestibulum in libero tincidunt, tempus odio accumsan, viverra urna. Cras molestie vel sem nec laoreet.</div>
</div>

When I set the height in the slimScroll function on 200 that will work So it looks like the function works but the scrollbar is still not showing up. When i look into the source code in my browser I see the container slimScrollDiv. I also see that the height of the class slimScrollBar isnt set. Maybe that causes the problem.

Any ideas?

Upvotes: 0

Views: 2946

Answers (2)

Pal Singh
Pal Singh

Reputation: 1974

If you are using dynamic data, make sure your DOM is populated with data before you call the slimScroll function. If that is the case, use setTimeout with 0.

For example:

setTimeout(function () {
    $("#formActions").slimScroll({
        height: '400',
        color: '#00f',
        alwaysVisible: true
    });
},0);

Upvotes: 4

Steven Britton
Steven Britton

Reputation: 197

For anyone else out there having this issue, you need to override the .slimScrollBar class by setting the display:block.

Example

.slimScrollBar{display:block !important;}

Upvotes: 1

Related Questions