Fix scroll/resize handle missing behavior.

IPython/html/static/notebook/js/pager.js

@@ -20,8 +20,8 @@ define([
          */
         this.events = options.events;
         this.pager_element = $(pager_selector);
-        this.pager_button_area = $('#pager_button_area');
-        this.pager_element.resizable({handles: 'n'});        
+        this.pager_button_area = $('#pager-button-area');    
+        this.pager_element.resizable({handles: 'n'});    
         this.expanded = false;
         this.create_button_area();
         this.bind_events();
@@ -34,7 +34,6 @@ define([
                     .attr('title',"Open the pager in an external window")
                     .addClass('ui-button')
                     .click(function(){that.detach();})
-                    .attr('style','position: absolute; right: 20px;')
                     .append(
                         $('<span>').addClass("ui-icon ui-icon-extlink")
                     )
@@ -44,7 +43,6 @@ define([
                     .attr('title',"Close the pager")
                     .addClass('ui-button')
                     .click(function(){that.collapse();})
-                    .attr('style','position: absolute; right: 5px;')
                     .append(
                         $('<span>').addClass("ui-icon ui-icon-close")
                     )
@@ -56,19 +54,22 @@ define([
         var that = this;
 
         this.pager_element.bind('collapse_pager', function (event, extrap) {
-            var time = 'fast';
-            if (extrap && extrap.duration) {
-                time = extrap.duration;
-            }
-            that.pager_element.hide(time);
+            // Animate hiding of the pager.
+            that.pager_element.hide((extrap && extrap.duration) ? extrap.duration : 'fast');
         });
 
         this.pager_element.bind('expand_pager', function (event, extrap) {
-            var time = 'fast';
-            if (extrap && extrap.duration) {
-                time = extrap.duration;
-            }
-            that.pager_element.show(time);
+            // Clear the pager's height attr if it's set.  This allows the
+            // pager to size itself according to its contents.
+            that.pager_element.height('initial');
+
+            // Animate the showing of the pager
+            var time = (extrap && extrap.duration) ? extrap.duration : 'fast';
+            that.pager_element.show(time, function() {
+                // Explicitly set pager height once the pager has shown itself.
+                // This allows the pager-contents div to use percentage sizing.
+                that.pager_element.height(that.pager_element.height());
+            });
         });
 
         this.events.on('open_with_text.Pager', function (event, payload) {

IPython/html/static/notebook/less/pager.less

@@ -2,7 +2,7 @@ div#pager {
     background-color:   @body-bg;
     font-size: @notebook_font_size;
     line-height: @notebook_line_height;
-    overflow: auto;
+    overflow: hidden;
     display: none;
     position: fixed;
     bottom: 0px;
@@ -23,10 +23,23 @@ div#pager {
         padding: @code_padding;
     }
 
-    #pager-container {
+    #pager-button-area {
+        position: absolute;
+        top: 0px;
+        right: 20px; 
+    }
+
+    #pager-contents {
         position: relative;
-        padding: 15px 0px;
-        .border-box-sizing();
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+
+        #pager-container {
+            position: relative;
+            padding: 15px 0px;
+            .border-box-sizing();
+        }
     }
 
 }

IPython/html/static/style/style.min.css

@@ -10283,7 +10283,7 @@ div#pager {
   background-color: #ffffff;
   font-size: 14px;
   line-height: 20px;
-  overflow: auto;
+  overflow: hidden;
   display: none;
   position: fixed;
   bottom: 0px;
@@ -10301,7 +10301,18 @@ div#pager pre {
   background-color: #f7f7f7;
   padding: 0.4em;
 }
-div#pager #pager-container {
+div#pager #pager-button-area {
+  position: absolute;
+  top: 0px;
+  right: 20px;
+}
+div#pager #pager-contents {
+  position: relative;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+div#pager #pager-contents #pager-container {
   position: relative;
   padding: 15px 0px;
   box-sizing: border-box;

IPython/html/templates/notebook.html

@@ -308,9 +308,10 @@ class="notebook_app"
 </div>
 
 <div id="pager">
-    <div id='pager_button_area'>
+    <div id="pager-contents">
+        <div id="pager-container" class="container"></div>
     </div>
-    <div id="pager-container" class="container"></div>
+    <div id='pager-button-area'></div>
 </div>
 
 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>