"float" displayed figures in notebook #2644

Open
ricklupton opened this Issue Dec 3, 2012 · 7 comments

Comments

Projects
None yet
6 participants
Contributor

ricklupton commented Dec 3, 2012

With a widescreen display there can be a lot of wasted space in the notebook. Would it be possible to allow output divs to "float" so that if multiple figures are output from a cell, depending on the window width there can be more than one per line?

This might not be right for every case, so maybe an option to disable it, or a way of outputting a "line break" would be needed.

I'm not sure if "float" is the best description, but I'm thinking of the CSS "float: left" property.

Owner

Carreau commented Dec 3, 2012

You should be able to do it by css can't give you the exact shenigan from the top of my head.
probably using display:inline-block

somethign like

<style>
    .output_area {
        display:inline-block;   
    }
</style>

One thing I use is fig,axes = subplots(1,n)
And the oo way of matplotlib to draw.

It leads me to more reusable code in general, where I create a function that plotSomething(data,ax=None) on anAxis

then I can do plotSomething(data,axes[1]) , plotSomething(otherData,axes[2]) and if I dont give it axes it create the axes itself.

Contributor

ricklupton commented Dec 4, 2012

Thanks for the suggestion, I will try to find some CSS I can use.

I already use subplots and so on, but I don't want to make all my images really wide because I want to be able to export my notebooks as PDF and print them. So I want my images to be the width of the paper page, but on a widescreen display it would be useful to make better use of the space available by wrapping several on to one line.

Hopefully that's explained what I think the problem is a bit more clearly.

Owner

Carreau commented Dec 4, 2012

I already use subplots and so on, but I don't want to make all my images really wide because I want to be able to export my notebooks as PDF and print them. So I want my images to be the width of the paper page, but on a widescreen display it would be useful to make better use of the space available by wrapping several on to one line.

The other thing we were thinking was to make input/output in 2 columns. We haven't found a nice way to do it in a cross-browser way yet.

zonca commented May 8, 2013

I am using inline-block, it is really nice to be able to use the full width of the page when I have lots of figures instead of having a long column of figures!
I would suggest setting it as default.

I am not able to control the style of the output_area class by setting

<style> .output_area { display:inline-block; } </style>

as you suggested.
Could you attached a small example ?

Owner

ellisonbg commented Feb 5, 2014

The cell CSS uses the flexible box model, so you would have to change a cell to a vbox rather than hbox. But I don't think that alone will do it - there is probably other CSS you have to change.

The problem is that I write cell output from an IPython Notebook extension (https://github.com/PBrockmann/ipython-ferretmagic) so with the function IPython.core.displaypub.publish_display_data. The resulting output is a complex interlace of divs with different classes (output_subarea, output_display_data, output_html, rendered_html) I have not been able to modify their CSS style to display plots as inline blocks without modifying other parts of the document.
Indeed the execution of a cell with the extension I have coded can produce several raster plots that I would find very convenient to see as inline blocks rather than displayed in a long column.
Read advantages of "small multiple" views.

minrk removed the type-enhancement label Jan 14, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment