diff --git a/IPython/html/static/notebook/js/pager.js b/IPython/html/static/notebook/js/pager.js
index 0787a12..7f99d25 100644
--- a/IPython/html/static/notebook/js/pager.js
+++ b/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(
$('').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(
$('').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) {
diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less
index 8a659a4..1f356cc 100644
--- a/IPython/html/static/notebook/less/pager.less
+++ b/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();
+ }
}
}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 4d83fec..7584fad 100644
--- a/IPython/html/static/style/style.min.css
+++ b/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;
diff --git a/IPython/html/templates/notebook.html b/IPython/html/templates/notebook.html
index efd71e2..ab5af59 100644
--- a/IPython/html/templates/notebook.html
+++ b/IPython/html/templates/notebook.html
@@ -308,9 +308,10 @@ class="notebook_app"