Ipywidgets: Problem trying to set the height (and width?) of a Textarea widget

[nleclercq]

Hi all,
Forcing the height of a Textarea doesn't work properly (I'm using ipywidgets 6 beta 6).
Attached is a picture illustrating the problem.
Am I doing something wrong ?
N.

[jasongrout]

Related: I'm working on making sure setting the widths works in #1078.

[jasongrout]

To make it easier to reproduce, here is the code from the above picture:

from IPython.display import display
from ipywidgets import Button, Layout, Textarea, HBox, VBox
l = Layout(flex='0 1 auto', height='40px', min_height='40px', width='auto')
t1 = Textarea(value='TA: height=40px', layout=l)
t2 = Textarea(value='TA: height=40px', layout=l)
vb = VBox([t1, t2], layout=Layout(flex='1 1 auto', width='auto'))
display(t1,t2)

[jasongrout]

The problem is that the rows (which we hardcode) overrides the height setting: https://github.com/ipython/ipywidgets/blob/master/jupyter-js-widgets/src/widget_string.ts#L113

We should expose 'rows' (and 'cols'?) to the user as a Textarea attribute.

[jasongrout]

(for a user that wants to set a specific height, they'd probably want to set the rows to be 1 and then control the height with .layout.height).

[jasongrout]

Should we always just set the rows to 1, and set a default height that the user can change? That makes it harder to have a textarea that is an integral multiple of the line height, but makes it easier to tile the widgets in a nice layout. @SylvainCorlay, @cameronoelsen

[jasongrout]

Sylvain and I discussed this. I'm going to move forward with setting rows to 1 by default, setting a natural height in css based on the default lineheight (to still give an integral number of rows).

Then if the user wants a text area of a certain size, they can just set the .layout.height.

We also might expose the rows attribute, so it is easy for a user to size the widget to an integral number of rows. Then it will be the user's responsbility to also set the height to something that makes sense.

[abulka]

Sorry to comment on a closed issue, but I've been struggling for hours to make the textarea auto expand to the height of its parent container. Buttons do it, bees do it - but not the text area.

from ipywidgets import Layout, Button, Box
outer = Layout(display='flex', height='100px', border='solid')
inner = Layout(flex='1', height='auto')
items = [widgets.Textarea(layout=items_layout, rows=None) for i in range(2)]  # rows=1 fails too
box = Box(children=items, layout=outer)
items[0].value = ''.join('{:.>15}'.format(n) for n in range(5, 1450, 5))
box

I've tried setting the new text area rows property (recently exposed and discussed in this thread) to None, and to 1 but nothing works. If I use buttons
items = [widgets.Button(layout=items_layout) for i in range(2)]
they do resize vertically nicely.

And in pure HTML/CSS outside of Jupyter, the textarea does grow to the enclosing height see my fiddle https://jsfiddle.net/tcab/syv2spq2/, so its possible, but something is blocking this behaviour in Jupyter? Or am I missing something?

[jasongrout]

Set the textarea height to 100%:

from ipywidgets import Textarea, VBox
text = Textarea(layout={'height': '100%'})
box = VBox([text], layout={'height': '500px'})
box

[abulka]

Brilliant, that works, thanks!