Space between lines keeps increasing

[ghost]

When I use the TQDM with Keras, it works well but each time an epoch is added, the space between the train loop progressbar and the epoch loop progressbar keeps increasing. It is anoying when I have several epoch. Here is an example:

[dzubo]

Same in my case.
MacOS, Google Chrome.

I looked at the HTML code of the widget and discovered that every 'inner loop' leaves this code:

<div class="output_area">
    <div class="prompt"></div>
    <div class="output_subarea jupyter-widgets-view"></div>
</div>

So the code above repeats itself as many times as the number of the epochs.
And this div's have nonzero height - that's why every inner loop adds blank spaces.

Maybe that is because the author of original TQDM changed something in the code.

[janfreyberg]

I think that's actually more a jupyter thing. What could fix this is if instead of generating a new tqdm for each epoch, it actually just re-uses the old one and manually sets n to zero.

(Of course, only when leave_inner = False)

[phausamann]

This is an issue with ipywidgets (#1845). The only fix so far is to revert to ipywidgets 6.0.1

[starfys]

Here's an implementation of @janfreyberg 's suggestion master...starfys:master

Note: The tqdm.monitor_interval = 0 at the top is unrelated, but helps with a different issue I was having (tqdm/tqdm#481)

Overall, this is a hack, and probably shouldn't be merged, but is useful in the meantime. The real issue is in ipywidgets (jupyter-widgets/ipywidgets#1845)

[phausamann]

Fixed in ipywidgets 7.2.0

Update your ipywidgets package to the latest version if you have this problem.

[guillochon]

Just FYI I am still getting this with ipywidgets 7.2.1. I'd prefer to turn off the inner progress bar entirely, there a way to do that?

[alexisdrakopoulos]

Still getting this on ipywidgets 7.4.2, have there been any other fixes/workarounds?

[TiagoCortinhal]

@alexisdrakopoulos > Still getting this on ipywidgets 7.4.2, have there been any other fixes/workarounds?

I found one!!
jupyter-widgets/ipywidgets#1845 (comment)

You can use the following as a workaround:

from IPython.core.display import HTML
HTML("""
<style>
.p-Widget.jp-OutputPrompt.jp-OutputArea-prompt:empty {
  padding: 0;
  border: 0;
}
</style>
""")

[marcosterland]

The workaround by @TiagoCortinhal worked for me. But I had to wrap it with the display function:

from keras_tqdm import TQDMNotebookCallback
display(HTML("""
    <style>
        .p-Widget.jp-OutputPrompt.jp-OutputArea-prompt:empty {
              padding: 0;
              border: 0;
        }
    </style>
"""))

[tommedema]

This is the only workaround that worked for me in JupyterLab:

from IPython.core.display import HTML

# See https://github.com/bstriner/keras-tqdm/issues/21#issuecomment-443019223
display(HTML("""
    <style>
        .jp-OutputArea-child:has(.jp-OutputArea-prompt:empty) {
              padding: 0 !important;
        }
    </style>
"""))