Undesired UX behavior of DataFrame output in IPython Notebook

[danieljl]

From my previous line comment at be80898#commitcomment-11338872. cc @takluyver @jorisvandenbossche

Because DataFrame's _repr_html_ returns hardcoded div tag with style max-height:1000px, if the height of DataFrame's output exceeds 1000px, it will generate a scroll bar.

First, it is unnecessary because IPython Notebook has "toggle output scrolling" feature. Second, it causes UX problem if the height of browser resolution is below 1000px (user must scroll twice: the whole page and the generated div). Third, it can't make use of "toggle output scrolling" feature (if user turn it on, it will generate nested scroll bars (worse UX)). For more detailed explanations and examples, see the steps to reproduce below.

Pandas version: 0.16.1.

Steps to reproduce:

1. Open an IPython Notebook and paste this code. It will generate an inner scroll bar because the output's height exceeds 1000px.

   import pandas as pd
   pd.DataFrame(list(range(100)))

2. If you want to see all rows, first you should scroll the page.
   

3. After you reach the bottom of the generated ouput's div, you should scroll again the inner scroll bar.
   

4. If you want to toggle the IPython Notebook's "toggle output scrolling" feature, you get this.
   

Desired behaviors:

• When "output scrolling" feature is off
  
• When "output scrolling" feature is on
  

Solution:
Remove style property from div tag that DataFrame's _repr_html_ returns.
Old: <div style="max-height:1000px;max-width:1500px;overflow:auto;">\n
New: <div>\n

Why should max-width be removed as well? Because it also generates far worse UX. If you have so many columns that the horizontal scroll bar generated, you cannot scroll it. You must refresh the page to be able to scroll it.

[shoyer]

Thanks for the clear documentation of the issue with the screenshots. I agree, we should fix this.

[shoyer]

Does IPython notebook cleanly handle horizontal scrolling when necessary if max-width is removed?

[takluyver]

IIRC, in IPython 3 we put the output in its own scrollable container if it is wider than the notebook. In earlier versions, the page would just get wider, so the whole page would get a horizontal scrollbar.

[shoyer]

Indeed, I verified that I get the proper horizontal scrolling behavior in IPython 3.

My only concern here is that IPython 3 may still be a little too new (3 months old) for us to change this -- we might break some folks still using earlier versions. On the other hand, upgrading IPython is pretty easy/seamless (in my experience).

Any other thoughts here?

[danieljl]

@shoyer I tested using IPython 2.4.1 and pandas with DataFrame's max-width removed. As @takluyver said, in IPython 2 the page just gets wider. Yup it is ugly, but it works. Is it acceptable?

[shoyer]

At least it only makes the one output cell wider -- it could be far worst (e.g., the entire page gets stretched).

For things like this, that work either way but are ugly for some users, I think we probably should make things nicer for users who are using the latest version of IPython. Of users who are using the latest version of pandas, a significant fraction are probably also keeping IPython up to date. So I think this change is a good idea.