CODEWITHSUNDEEP
pythonjupyteripywidgets
Alex
Alex

Reputation: 4264

Jupyter Notebook: How to change spacing between Text objects inside HBox?

Say I have the following code in a cell in the Jupyter Notebook:

from ipywidgets.widgets import HBox, Text
from IPython.display import display

text1 = Text(description = "text1", width = 100)
text2 = Text(description = "text2", width = 100)
text3 = Text(description = "text3", width = 100)
text4 = Text(description = "text4", width = 100)
text5 = Text(description = "text5", width = 100)
display(HBox((text1, text2, text3, text4, text5)))

It produces the following output:

enter image description here

As you can see, there is a ton of unnecessary spacing between the Text objects. How do I change the spacing so that they stay within the cell?

Upvotes: 3

Views: 7235

Answers (2)

Shouvik Roy
Shouvik Roy

Reputation: 109

Building on Zarak's answer, you can do something like this

from ipywidgets.widgets import HBox, Text
from IPython.display import display, HTML

text1 = Text(description = "text1", width = 100)
text2 = Text(description = "text2", width = 100)
text3 = Text(description = "text3", width = 100)
text4 = Text(description = "text4", width = 100)
text5 = Text(description = "text5", width = 100)

display(HBox((text1, text2, text3, text4, text5)))
display(HTML('<style> .widget-text { width: auto; } </style>'))
print('hi')

This way, you don't need to have the HTML('<style> .widget-text { width: auto; } </style>') statement as the last statement.

Upvotes: 2

zarak
zarak

Reputation: 3003

It seems that the spacing is due to the width of the widget-text class being specified with a width of 350 pixels. Try importing the HTML module (i.e. from IPython.display import display, HTML) and insert HTML('<style> .widget-text { width: auto; } </style>') into the cell.

You should end up with something like this:

from ipywidgets.widgets import HBox, Text
from IPython.display import display, HTML

text1 = Text(description = "text1", width = 100)
text2 = Text(description = "text2", width = 100)
text3 = Text(description = "text3", width = 100)
text4 = Text(description = "text4", width = 100)
text5 = Text(description = "text5", width = 100)

display(HBox((text1, text2, text3, text4, text5)))
HTML('<style> .widget-text { width: auto; } </style>')

widgets styled with CSS

Upvotes: 2

Related Questions