Notebook scrolling breaks after pager is shown

[jasongrout]

Currently, these two lines force the #notebook div to have overflow: hidden style, which prevents us from scrolling in the notebook after the pager has shown:

https://github.com/ipython/ipython/blob/master/IPython/frontend/html/notebook/static/js/notebook.js#L279
https://github.com/ipython/ipython/blob/master/IPython/frontend/html/notebook/static/js/notebook.js#L292

This is discussed in http://stackoverflow.com/questions/3363035/jquery-animate-forces-style-overflowhidden, for example. I see two possible resolutions:

• use the .css() method, as in the stackoverflow answer above
• don't use .animate(); instead, just set the height directly with .height()

Personally, I would probably give up on animations, since using the css method requires us to hardcode the css.

[ellisonbg]

Jason, what steps will reproduce this one?

On Tue, Dec 18, 2012 at 4:36 AM, Jason Grout notifications@github.comwrote:

Currently, these two lines force the #notebook div to have overflow:
hidden style, which prevents us from scrolling in the notebook after the
pager has shown:

https://github.com/ipython/ipython/blob/master/IPython/frontend/html/notebook/static/js/notebook.js#L279

https://github.com/ipython/ipython/blob/master/IPython/frontend/html/notebook/static/js/notebook.js#L292

This is discussed in
http://stackoverflow.com/questions/3363035/jquery-animate-forces-style-overflowhidden,
for example. I see two possible resolutions:

• use the .css() method, as in the stackoverflow answer above
• don't use .animate(); instead, just set the height directly with
  .height()

Personally, I would probably give up on animations, since using the css
method requires us to hardcode the css.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2703.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

[jasongrout]

Open the notebook (for me, in Chrome 23.0.1271.101 on OS X 10.6.8). Create a bunch of cells so that the input needs to be scrolled (create these without doing any ? queries, so the pager doesn't show). Then do ? query (e.g.,

import IPython
IPython?

The scrollbars should disappear in the cell area, and thereafter the only way to navigate the document is using the keyboard (scrolling in the document area is disabled).

Here is my patch that fixes it for me, but disables animations:

diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/fron
index 78d22e3..1965db9 100644
--- a/IPython/frontend/html/notebook/static/js/notebook.js
+++ b/IPython/frontend/html/notebook/static/js/notebook.js
@@ -276,7 +276,7 @@ var IPython = (function (IPython) {
             var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
-            that.element.animate({height : new_height + 'px'}, time);
+           that.element.height(new_height+'px')
         }

         this.element.bind('collapse_pager', function (event,extrap) {
@@ -289,7 +289,7 @@ var IPython = (function (IPython) {
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height;
-            that.element.animate({height : new_height + 'px'}, time);
+           that.element.height(new_height+'px');
         }

         this.element.bind('expand_pager', function (event, extrap) {

[minrk]

this has been fixed