10

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)?

Alex
  • 34,021
  • 64
  • 178
  • 371

1 Answers1

10

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)
amanb
  • 4,209
  • 2
  • 14
  • 34
  • But now I have extra space on both sides. Ideally I want the text to fill out the space, i.e. so much space as the text is long. – Alex Mar 05 '19 at 07:30
  • ok, I've just edited my answer. The `width` should be set to `auto`. – amanb Mar 05 '19 at 09:05