Search code examples
pythonipywidgets

How to display the full text in the button ipywidget?

I am creating an ipywidget button with some text. But the full text is not shown in the button:

enter image description here

The code I have used is as follows:

import ipywidgets as widgets
from IPython.display import display
button = widgets.Button(
    description='Test button with some text.',
    disabled=False,
    display='flex',
    flex_flow='column',
    align_items='stretch'
)        
display(button)

What options to use so the full text is shown in the button (i.e. to make the button width increase so the full text is shown)?

Solution

  • You can create an object of the Layout class and use it as an attribute to style width/height for different widgets. You can read more about it here. The properties defined in Layout are CSS properties. Therefore, to fit text to button width, just set width='auto'. 

    import ipywidgets as widgets
from IPython.display import display

layout = widgets.Layout(width='auto', height='40px') #set width and height

button = widgets.Button(
    description='Test button with some text.',
    disabled=False,
    display='flex',
    flex_flow='column',
    align_items='stretch', 
    layout = layout
)        
display(button)

    enter image description here

    Lets increase the description length:

    description='Test button with some text and some more'

    enter image description here

    You can re-use the layout property on other widgets too:

    widgets.Button(description='Another button with the same layout', layout=button.layout)