CODEWITHSUNDEEP
jquerycssjscrollpane
Jiew Meng
Jiew Meng

Reputation: 88197

Need help styling jScrollPane

I am trying to style my jScrollPane

but I find that my scroll bar is extending out of the container

How can I fix it? Code can be seen in http://jsfiddle.net/Mfest/

Upvotes: 3

Views: 4703

Answers (3)

thirtydot
thirtydot

Reputation: 228162

My answer is now redundant, see the below answer.

I don't know the "proper jScrollPane method", but this does work in modern browsers.

The problem is that the padding and border on .jspTrack is adding up to make the height of the scrollbar 306px, instead of 300px.

So, you can use the box-sizing property on .jspTrack:

    /* https://developer.mozilla.org/en/CSS/box-sizing */
    width: 12px; /* adjust width */
    /* support Firefox, Safari/WebKit, Opera and IE8 */
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;

See: http://jsfiddle.net/Mfest/2/

I would personally not be satisfied with this answer, because it seems a kludgy way to fix it.

Upvotes: 2

vitch
vitch

Reputation: 3214

The recommended solution is to use the .jspCap to add space above or below the track rather than padding or borders. I've implemented this here:

http://jsfiddle.net/Mfest/6/

Note that I set the top and bottom caps to different sizes to make things appear to line up equally - I think that the rounded corners/ borders may be confusing the jScrollPane calculations a little bit.

Another demo of the caps in action: http://jscrollpane.kelvinluck.com/caps.html

Upvotes: 3

Sotiris
Sotiris

Reputation: 40046

you have padding:2px; for .jspTrack this add padding for top and bottom of scrollbar, with result to overflow the container. Try to change it to padding:0 2px;.

Update: I set fixed heights for .jspTrack and .jspDrag also.

Demo: http://jsfiddle.net/Mfest/3/

Upvotes: 1

Related Questions