ipywidgets Textarea height='auto' does not work

Question

I am using ipywidgets to create a Dashboard with voila

I have a Textarea as follows:

comm_text = widgets.Textarea(value='',
                            placeholder='OK',
                            description='',
                            style=style,
                            layout=widgets.Layout(height="auto", width="auto"))

what I pretend with height="auto" is that when entering lines in textarea the text box expands vertically accordingly. (I want to have all the text visible)

It actually does not happend. As you can see in the screenshot I introduced 8 lines but the textarea does not expand along.

Is that at all possible? If not, what does actually height="auto" stand for?

score 3 · Accepted Answer · answered Nov 27 '21 at 19:52

If you change

layout=widgets.Layout(height="auto", width="auto")

for

layout=widgets.Layout(height="100%", width="auto")

It will resize to display all the text that it had on the value (default value for the Textarea).

However it won't grow as you type. I don't remember any textarea that does that on webpages.

One more thing. If you are using grids, with height="auto" and you resize the Textarea (dragging by the corner), it will resize other related elements of the grid.

That won't happen if you use height="100%"

score 1 · Answer 2 · answered Apr 06 '20 at 20:19

The parameter height='auto' sets the CSS of the widget to 'auto'. But it has no effect for a textarea, because the number of rows are hard-coded. Jason Grout speaks of this in this Github post.

If you want a growing text area, you could use this workaround:

def get_bigger(args):        
    comm_text.rows = comm_text.value.count('\n') + 1

comm_text = Textarea(value='',
                            placeholder='OK',
                            description='',
                            rows=1,                            
                            layout=Layout(width="auto"))
comm_text.observe(get_bigger, 'value')
comm_text

Disclaimer: I don't know if this behavior is useful. You will give up control how big the textarea can get.

ipywidgets Textarea height='auto' does not work

2 Answers2