Python / Jupyter Notebook – How to disable text truncation in widgets VBOX/HBOX?

Question

I’ve searched in the documentation and in the forums but I didn’t find my answer so I ask it here…

Here is an line of my code to set my widgets:

bankroll_init = wg.IntSlider(min=1000, max=10000, step=500, value=3000, description='Initial Bankroll')

And here is my VBox to display all my widgets:

ui = wg.VBox([bankroll_init, bet_init, multiplier,odds_category,league]) 
out = wg.interactive_output(calcul, {'bankroll_init': bankroll_init, 'bet_init': bet_init,
                                 'multiplier': multiplier,'odds_category':odds_category,'league':league})

display(ui)
display(out)

I don’t want the description of each widget to get cropped/truncated. How could I force it please?

Asked By: athos

||

Source

Answer 1

For the sliders this is covered in the ipywidgets ‘Layout of Jupyter widgets’ documentation under the ‘Description’ heading. (Search for the text ‘may have noticed that long descriptions are truncated’ to find the exact point in the documentation text.) Here is the option using the styler:

import plotly.graph_objs as go
import numpy as np
from ipywidgets import widgets
from IPython.display import display
def calcul(bankroll_init, bet_init):
    print((bankroll_init +  bet_init))
style = {'description_width': 'initial'}
bankroll_init = widgets.IntSlider(min=1000, max=10000, step=500, value=3000, description='Initial Bankroll', style = style)
bet_init = widgets.IntSlider(min=10, max=10000, step=500, value=3000, description='First Bet')
ui = widgets.VBox([bankroll_init, bet_init]) 
out = widgets.interactive_output(calcul, {'bankroll_init': bankroll_init, 'bet_init': bet_init,})
display(ui)
display(out)

You can also use an HBox with the Label widget directly:

import plotly.graph_objs as go
import numpy as np
from ipywidgets import widgets, HBox, Label
from IPython.display import display
def calcul(bankroll_init, bet_init):
    print((bankroll_init +  bet_init))
bankroll_init = widgets.IntSlider(min=1000, max=10000, step=500, value=3000 )
bet_init = widgets.IntSlider(min=10, max=10000, step=500, value=3000, description='First Bet')
ui = widgets.VBox([HBox([Label('Initial Bankroll'), bankroll_init]), bet_init]) 
out = widgets.interactive_output(calcul, {'bankroll_init': bankroll_init, 'bet_init': bet_init,})
display(ui)
display(out)

For the drop-down, you can do similar:

from ipywidgets import widgets
style = {'description_width': 'initial'}
widgets.Dropdown(
    options=['Option 1', 'Option 2', 'Option 3'],
    value='Option 1',
    description='Choose your own adventure:',
    disabled=False,
    style = style
)

As covered in the RadioButtons documentation under the subheading ‘With dynamic layout and very long labels’, you can combine the similar style approach with controlling the layout so the long description doesn’t clip into the button area and move the item names from next to the button circles:

from ipywidgets import widgets
style = {'description_width': 'initial'}
widgets.RadioButtons(
    options=['pepperoni', 'pineapple', 'anchovies'],
    layout={'width': 'max-content'}, # If the items' names are long
    description='Pizza topping with a very long label:',
    disabled=False,
    style = style
)

For comparison, you’ll see the clipping with:

from ipywidgets import widgets
style = {'description_width': 'initial'}
widgets.RadioButtons(
    options=['pepperoni', 'pineapple', 'anchovies'],
#    layout={'width': 'max-content'}, # If the items' names are long
    description='Pizza topping with a very long label:',
    disabled=False,
    style = style
)

Pulling it all together.
This should give something like you posted in your image:

import plotly.graph_objs as go
import numpy as np
from ipywidgets import widgets
from IPython.display import display
def calcul(bankroll_init, bet_init):
    print((bankroll_init +  bet_init))
style = {'description_width': 'initial'}
bankroll_init = widgets.IntSlider(min=1000, max=10000, step=500, value=3000, description='Initial Bankroll', style = style)
bet_init = widgets.IntSlider(min=10, max=10000, step=500, value=3000, description='First Bet')
multiplier = widgets.IntSlider(min=1000, max=10000, step=500, value=3000, description='Multiplier accent',style = style)
odds_category = widgets.RadioButtons(
    options=[1, 2, 3],
    #layout={'width': 'max-content'}, # If the items' names are long
    description='1= Odds< 1; 2 =  something else, on & on',
    disabled=False,
    style = style
)
league = widgets.Dropdown(
    options=['League 1', 'League 2', 'League 3'],
    value='League 1',
    description='Choose your own adventure:',
    disabled=False,
    style = style
)
ui = widgets.VBox([bankroll_init, bet_init, multiplier,odds_category,league]) 
out = widgets.interactive_output(calcul, {'bankroll_init': bankroll_init, 'bet_init': bet_init,
                                 'multiplier': multiplier,'odds_category':odds_category,'league':league})
display(ui)
display(out)

All the code blocks above were developed and will work right in your browser with no installations necessary via mybinder-served sessions launched via here where the environment is determined by this list of pip installed packages. Many of those listed are not used in these particular examples.

In the future when posting, don’t just include fragments of your code. Include a minimal reproducible example so that those trying to help you don’t have to reverse engineer your code based on an image to have something to work on. Also this helps you get something back that is closer to what you had as well.

Answered By: Wayne

Python / Jupyter Notebook – How to disable text truncation in widgets VBOX/HBOX?

Question:

Answers: