Monospace In Ipywidgets.textarea?

how could I get my widgets to use monospace fonts? from ipywidgets import Textarea Textarea('The world is bigger than you.') I want to show some table style data.

Solution 1:

This may be a brittle solution, but it seems to work. Add a html magic section giving the css styling:

%%html
<style>textarea, input {
    font-family: monospace;
}
</style>

Solution 2:

This also works:

from IPython.display import displayfrom IPython.core.display import HTMLdisplay(HTML("<style>textarea, input { font-family: monospace; }</style>"))

Solution 3:

The documentation talks about the style attribute of widgets that gives you access to CSS properties. However only some properties are exposed to the widget via style.

The workaround is to edit the CSS style within the notebook / jupyter / colab cell and then display the widget.

# Adding monospace styleimport IPython
IPython.display.HTML('<style> select, textarea, input { font-family: Courier New; } </style>')

# Seems that either the # font-family: monospace or font-family: Courier New # produce the monospace effect.# IPython.display.HTML('<style> select, textarea, input { font-family: monospace; } </style>')# Display your widget
widgets.SelectMultiple(options=sss)
widgets.Textarea(value="Here it is")

It works for Textarea, Input, Select, SelectMultiple and any other widgets as they all are html.

---

Another way is to define the style for a CSS class, and then attach that class to the desired widgets.

IPython.display.HTML('''<style>
.mytext > select,.mytext > textarea   {
    font-style: italic;
    color: blue;
    font-size: 30px;
}
</style>''')

w2=widgets.Textarea(value="Here it is")
w2.add_class("mytext")

w1=widgets.SelectMultiple(options=sss)
w1.add_class('mytext')