Styling Output() widget for nowrap and overflow horizontal scroll

Widgets
1

I am a Jupyter-lab novice, and certainly not a css expert …

With this code the green border box appears, but the lines still wrap, and no scroll bar appears:

style = {'overflow-x': 'scroll' ,'white-space': 'nowrap' ,'border': '1px solid green'}
out = widgets.Output(description = "Work1 log" ,layout=style)
display(out)

(the website might be adding a scroll bar to the quoted text when viewed on the web, which ironically is what I am trying to get the Output() widget to do. There is no scroll bar in the Jupyter notebook.)
2023-11-09T14:51:37.832184Z event> accountValueEvent AValue(account='Dxxxxx1', tag='alance', value='219272.5709', cy='BASE', modelCode='')

With this code, where ‘overflow’ replaces ‘overflow-x’, in addition to the green border box, both horizontal and vertical scroll bars show. However, the text itself still wraps just as before:

style = {'overflow': 'scroll' ,'white-space': 'nowrap' ,'border': '1px solid green'}
out = widgets.Output(description = "Work1 log" ,layout=style)
display(out)

When replacing ‘layout=style’ with ‘style=style’ , all style gets ignored. There is not even a green border box:

style = {'overflow': 'scroll' ,'white-space': 'nowrap' ,'border': '1px solid green'}
out = widgets.Output(description = "Work1 log" ,style=style)
display(out)

So why doesn’t style work? But more to the point, does anyone know how to style the Output() so that lines do not wrap, and a horizontal scroll bar appears?

2

The entire space of CSS directives is not supported by layout, and many of the base widgets have a lot of hard-coded defaults that are usually good enough.

A more robust overloading approach might be to add to the _dom_classes of the Output, and then have an HTML widget which contains precisely the <style> you want.

3

Thanks bollwyvl,

So you are suggesting using .DOMWidget to add a class, as described here:
https://notebook.community/steve-federowicz/om/examples/.ipynb_checkpoints/Widget%20Styles-checkpoint

Or suggesting making a custom widget like this:
https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html

4

DOMWidget is a superclass of Output (and almost everything else). So, without knowing more about where you plan to use this (e.g. a one-off, a library, etc) something like:

from ipywidgets import Output, HTML
out = Output()
out.add_class('my-pretty-class')
html = HTML('<style>.my-pretty-class{ white-space: nowrap; }</style>')
display(html, out)
2 Likes