Can't turn off scroll bar on the slides

[yadongli]

I'm upgrading some of my ipython notebooks and lecture slides for a class I'm teaching, from an older version of ipython (i think it is version 2.3) to jupyter and nbconvert version 4.0.0, i have noticed the scrollbars started to appear in the resulting slides.html after the upgrade. I have never seen these scrollbars when I was using the nbconvert that came with the older ipython.

I cannot get rid of these scrollbars by adding following to the custom.css:

.reveal {
  overflow-y: hidden;  
}
div.text_cell_render {
  overflow-y: hidden;
}

I used the following command to create the .slides.html:

ipython nbconvert --to slides --template ./scrollbar.tpl --reveal-prefix "//cdn.jsdelivr.net/reveal.js/2.6.2" scrollbar.ipynb

The following is the screenshot of the resulting scrollbar:

Please let me know if I'm doing anything wrong, and how can i get rid of these scrollbars.

the following is a sample of my ipynb that produces the scrollbars: scrollbar.ipynb:

{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false,
"slideshow": {
"slide_type": "skip"
}
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Populating the interactive namespace from numpy and matplotlib\n"
]
}
],
"source": [
"%pylab inline\n",
"\n",
"import fmt\n",
"import sympy as sp\n",
"from IPython.display import display, HTML, Math\n",
"\n",
"sp.init_printing(use_latex = True)"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"## Gaussian elimination\n",
"\n",
"Eliminate the $x_1$ terms using the first row, this operation is a linear transformation:\n"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/latex": [
"$$ L_{1} \left(\begin{matrix}2 & 1 & -1\-6 & -2 & 4\-2 & 1 & 2\end{matrix}\right)\left(\begin{matrix}x_{1}\x_{2}\x_{3}\end{matrix}\right)=L_{1} \left(\begin{matrix}8\-22\-3\end{matrix}\right);,;;\left(\begin{matrix}2 & 1 & -1\0 & 1 & 1\0 & 2 & 1\end{matrix}\right)\left(\begin{matrix}x_{1}\x_{2}\x_{3}\end{matrix}\right)=\left(\begin{matrix}8\2\5\end{matrix}\right)$$"
],
"text/plain": [
"<IPython.core.display.Math object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"a = sp.Matrix([[2, 1, -1], [-6, -2, 4], [-2, 1, 2]])\n",
"y = sp.Matrix([8, -22, -3])\n",
"X = sp.MatrixSymbol('x', 3, 1)\n",
"x1, x2, x3 = sp.symbols('x_1, x_2, x_3')\n",
"x = sp.Matrix([x1, x2, x3])\n",
"\n",
"A = sp.MatrixSymbol('A', 3, 3)\n",
"L1 = sp.MatrixSymbol('L_1', 3, 3)\n",
"L2 = sp.MatrixSymbol('L_2', 3, 3)\n",
"l1 = sp.eye(3)\n",
"l1[1, 0] = -a[1, 0]/a[0, 0]\n",
"l1[2, 0] = -a[2, 0]/a[0, 0]\n",
"\n",
"fmt.displayMath(L1_a, fmt.joinMath('=', x, L1_y), ";,;;", l1_a, fmt.joinMath('=', x, l1_y), sep="")"
]
}
],
"metadata": {
"celltoolbar": "Slideshow",
"kernelspec": {
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 2
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython2",
"version": "2.7.6"
}
},
"nbformat": 4,
"nbformat_minor": 0
}

and the following is my scrollbar.tpl:

{%- extends 'slides_reveal.tpl' -%}

{% block input_group -%}

{{ super() }}

{% endblock input_group %}

{% block body %}

{{ super() }}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> //div.output_wrapper { // margin-top: 0px; //} .input_hidden { display: none; // margin-top: 5px; } </style> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

<!-- MathJax configuration -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        processEnvironments: true
    },
    // Center justify equations in code and markdown cells. Elsewhere
    // we use CSS to left justify single line equations in code cells.
    displayAlign: 'center',
    "HTML-CSS": {
        styles: {'.MathJax_Display': {"margin": 0}},
        linebreaks: { automatic: false }
    }
});
</script>

<script> Reveal.initialize({ // Display controls in the bottom right corner controls: true, // Display a presentation progress bar //progress: true, // Push each slide change to the browser history history: false, // Enable keyboard shortcuts for navigation keyboard: true, slideNumber: true, // Enable touch events for navigation //touch: true, // Enable the slide overview mode //overview: true, // Vertical centering of slides //center: true, // Loop the presentation //loop: false, // Change the presentation direction to be RTL //rtl: false, // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides //autoSlide: 0, // Enable slide navigation via mouse wheel //mouseWheel: false, // Transition style // transition: 'concave', // default/cube/page/concave/zoom/linear/fade/none // Transition speed //transitionSpeed: 'default', // default/fast/slow // Transition style for full page backgrounds //backgroundTransition: 'default', // default/linear/none // Theme // width: 100%, // height: 100%, margin: 0, theme: 'white', // available themes are in /css/theme }); </script>

{% endblock body %}

[brettcannon]

I have had similar scrollbars on the vertical axis show up on slides where I have a top-level section in Markdown only (i.e., # Section).

[akhmerov]

@brettcannon This is now fixed in #38, with fix released in nbconvert 4.1.0. The fix is just a css patch though.

[yadongli]

The scrollbars occur if and only if I use IPython.display and Math to display latex formula, e.g., the following cell will produce the vertical scrollbar:

from IPython.display import display, HTML, Math
display(Math(r'\left[\begin{matrix}2 & 1 & -1-7 & -2 & 4-2 & 1 & 2\end{matrix}\right]'))

hope this helps

[damianavila]

The scrollbars occur if and only if I use IPython.display and Math to display latex formula, e.g., the following cell will produce the vertical scrollbar:

Thanks, will take a look...

[takluyver]

@damianavila any further thoughts?

[damianavila]

This is probably again because css conficts with mathjax and reveal... need to test it with current master, please keep it open until I research a little bit more...

[bs1234]

In case more examples help, i'm having similar issues with scroll bars:
Scroll bars appear on titles, printing dataframes & charts (made with Bokeh) when converted to slides.
And in case its relevant: images (.png) do get scaled appropriately and thus do not have a scroll bar.

My preference would be to shrink all titles, dataframes, and charts so scroll bars get removed (like the .png images)

Related issues:
damianavila/RISE#162
damianavila/RISE#127

And Damian: thank you again for your contribution to another great package

[damianavila]

In case more examples help, i'm having similar issues with scroll bars:
Scroll bars appear on titles, printing dataframes & charts (made with Bokeh) when converted to slides.

With Bokeh we have another layer of possible conflict with css... I am almost 100% sure by now that we need to remove scrollbars by default and only provide the option to enabling them by user request... it should be an special case.

[gregnordin]

I actually like the scrollbars, at least for slides with content that would otherwise be invisible beyond the bottom of the slide. As long as there is documentation that makes clear how to turn this on, it would be fine to have the default be off.

[bs1234]

My use case for scroll bars = 'off' is to allow printing to hardcopy or pdf.
But would also want scroll bars = 'on' for slideshows

[gregnordin]

@bs1234 - yes, that would be perfect!

[yadongli]

A flag to turn off all scroll bar would be great, when can we have it?

[orome]

+1

[damianavila]

See my comment here: #78 (comment).
Essentially a config option to make the slides scrollable (per slide) but disabled scroll by default.

[damianavila]

Essentially a config option to make the slides scrollable (per slide) but disabled scroll by default.

Scroll situation should be better now than #600 was merged.
Closing here.