ipython notebook css formatting of code cells

Question

I'm using custom css in my notebook, but it seems that I haven't overwritten the default css properly. My code cells look like this:

When I execute them, they add some space at the bottom which seems to include the original input format:

I'd like to get rid of this.

Using firefox's Inspector, I can see that the div.input_area element is enlarged when compared to the same element in the cells below that haven't been executed:

The enlarged div is highlighted in faint blue, in the section titled 'Setting up'. The same element under the section 'Defining some helper functions' has the correct size.

Once I double click on the enlarged cell, it displays correctly again.

What causes the div.input_area element to increase in size or what could I do to find the cause?

Edit:

I just found out that the parent of div.input_area has a -moz-box-flex: 1 property. When I untick this, the cell shrinks horizontally to fit content (which I don't want) but also covers the previously added extra space. It looks like this:

Answer 1

Can you share your modify css ? I can't see the behavior on my computer with default theme. And I don't see any reason why the size of the .input_area should change seeing how it works. But I'm on master[*] and some css have been changed, so this might be the reason why.

As for overwriting the css properly, there is no official way to do it, except with custom.css, but as our css is almost-fully compiled using .less you might want to just redefine a variable.less file and recompile your full style.css file to be sure to overwrite the color in all the right places.

Side note, we'd like to have easier theming for the notebook/nbviewer, but we don't have enough manpower to do that. Ideas, help and docs writing welcomed :-)

[*] or even on branches not merged on master most of the time