Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

jScrollPane reinitialization should adapt to changed container size #81

wants to merge 1 commit into


None yet
6 participants

ept commented Jun 22, 2011

I often want the height of my jScrollPane container to be able to change size, depending on the context of the surrounding page. However, once jScrollPane has been initialized, it is 'locked' to its initial size, and won't increase its size, even if more space is later available.

I have changed the reinitialization flow to reexamine the available space, and resize if necessary. I've also included a little demo page illustrating the change.



vitch commented Jun 22, 2011

jScrollPane should already allow a pane to adjust when it's containing element changes size. See




(resize the browser window to see the size changes)

Do you know what the difference is in your case which prevents this from happening?


ept commented Jun 28, 2011

The dynamic_height and dynamic_width examples work because when you set the size of the jspScrollable as a percentage of the page, their size in pixels depends only on the dimensions of the page, and not on their contents.

The max-height example I provided is different: the height of the jspScrollable depends on the height of the jspContainer (as long as the jspContainer is shorter than the max-height that is set). However, during recalculation, the jspContainer keeps the fixed size in pixels that it was assigned when jScrollPane first initialized. This means that if max-height is increased, jspContainer still stays a fixed size, and thus the surrounding jspScrollable doesn't change in size either — even though the jspPane may be much taller than the jspScrollable's max-height.

My change temporarily removes the fixed height/width assignment of the jspContainer, so it is free to take advantage of the newly available space up to the jspScrollable's max-height.

Try the included example page with and without the fix to see the difference :)

This work from ept is a good capability for the plugin, please think about merge it.

+1, @ept good work!!!

@johan johan commented on the diff Feb 3, 2012

@@ -128,19 +128,24 @@
} else {
elem.css('width', '');
+ // To measure the required dimensions accurately, temporarily override the CSS positioning
+ // of the container and pane.
+ container.css({width: 'auto', height: 'auto'});
+ pane.css('position', 'static');
+ newPaneWidth = elem.innerWidth() + originalPaddingTotalWidth;
+ newPaneHeight = elem.innerHeight();
+ console.log('newPaneHeight = ' + newPaneHeight);

johan Feb 3, 2012

This logging should probably not remain in the released code.

@vitch, I'm curious to know why this patch hasn't been accepted, if it solves an important issue

I second for the necessity of the patch - exactly the same problem - the case is as with the dynamic_content, but I need the pane to have the max-height instead of height (think of the list that grows until it has 3 items, then starts scrolling)

I tried the fix by @ept and for my case (the content grows with fixed max-height set on container) I have 2 minor issues

  1. I have to call reinitialise twice, and
  2. I have a scroll bar shown though it height is 100%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment