notebook becomes narrow when html text widget is used

[Alcampopiano]

Hi there,

I've got a widget.html object that fills with text when a button is clicked. This works perfectly in jupyter lab. In the notebook however (version 5.0.0), when I click the button to display the html, the entire notebook becomes very skinny, making the large text output very difficult to read. Even the toolbar becomes offset from the main white space of the notebook. Here are some images:

before updating the widget.html.value with button click:

after updating (text display not shown for privacy, but you get the idea):

toolbar:

Any ideas about why this might be happening?

Sincerely,
Allan

[takluyver]

It's probably setting some global CSS which also affects the notebook.

[Alcampopiano]

Is there are way to disable that from happening? I'm wondering why it's not happening in jupyter lab as well.

[takluyver]

Probably the same CSS doesn't have the same effects on Jupyterlab, because it's using different HTML classes and IDs.

You may be able to avoid it by displaying the HTML with the isolated: true metadata, which puts it in a new iframe.

[Alcampopiano]

Okay. I did,

from IPython.display import HTML, display

and in my callback function, as you've suggested,

display(HTML(x), metadata=dict(isolated=True))

and that works very well once I click the sidebar to unscroll the text. Thanks very much!!

Allan

[takluyver]

Great :-)