[text-area] Min/max rows attributes/properties

[yuriy-fix]

Controlling the minimum and maximum height of the text-area is a common thing. Some DX/UX tests participants were expecting to see attributes for doing that. Should we introduce those or something like min-rows, max-rows that will be standing for height?

[jouni]

Let’s keep this as an enhancement request for now. Add your ”+1” reaction if you really need this.

[jouni]

The current way of controlling this is to use CSS min|max-height for the <vaadin-text-area> element.

vaadin-text-area {
  min-height: 100px;
  max-height: 300px;
}

See live examples: https://vaadin.com/components/vaadin-text-field/html-examples#text-area-demos

[lanmaster]

min-height: 10px; didn't work

[jouni]

@lanmaster do mean that the field does not shrink to 10px? There's an issue about that: vaadin/web-components#1363

[netbeansuser2019]

So take to consideration: https://github.com/vaadin/vaadin-text-field/issues/506

[netbeansuser2019]

Let me react to @jouni

There is simple use case as TextArea can be only scroll entirely then you cannot use well prefix and suffix component as it is hard to e.g. place any content into middle in such suffix or prefix, because if it is scrollable than such component ends out of visible area ... so if you need content to be possibly seen to user all the time ... like buttons, advice, status indicator, data indicator, and so on you can not do that for TextArea. So if you needed that you have to add extra wrapping so than there is not reason for suffix and prefix component at all if there is no simple way to adjust that. So if there is not expectation to turn back rows as in previous version Vaadin than I would like to suggest to be possible to turn on just scrolling of "input-area".

[jouni]

Thanks for the use case description, @netbeansuser2019!

To me it seems like that’s a separate topic, whether or not the prefix and suffix elements scroll together with the text content (vs how to control the sizing of <vaadin-text-area>).

If I understood correctly, I think what you are asking is for a way to directly pass the rows attribute to the internal <textarea> element. I don’t think we want to do that, as that exposes the internal implementation details of the component. That said, we could still offer an API to set the height limits as “rows”, for example with min-rows and max-rows attributes. How those would internally work, might be using the rows attribute on the textarea, but might be something else.

As for the other use case (scrolling), that could also be opt-in/out (like you mentioned in vaadin/vaadin-text-field#506 ). Though, I admit that I don’t remember any concrete use cases where you’d want the prefix/suffix element to scroll with the text.

Finally, as a workaround, you can achieve the desired scrolling behavior by using position: sticky;. Note, that it doesn’t work in IE11 or old Edge versions.

<vaadin-text-area>
  <div slot="prefix">Prefix</div>
</vaadin-text-area>

<style>
[slot="prefix"] {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
</style>

[netbeansuser2019]

I do not think so it could be fixed by "sticky" in case of "middle".

[jouni]

Not sure what you mean with ”middle” – can you elaborate?

[netbeansuser2019]

I mean like any icon shown in middle of visible area not in middle of entire scrollable area.

[jouni]

You mean like this?

That can be done like this:

[slot="prefix"] {
  position: -webkit-sticky;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

[netbeansuser2019]

Firstly this should be possible just from API. If I used your code in https://www.w3schools.com/Css/tryit.asp?filename=trycss_position_sticky so wrapped to DIV as styled as flex and no padding and set fixed size and overflow to scroll that has such two div-s inside such sticky one has never been in middle of visible area with new Edge and even FF, but ends on "the first line".

[jouni]

Hey, I’m just trying to help, provide a workaround 🤗 Perhaps it should be a built-in feature, but that’s probably not going to happen very soon, so we need to make due with workarounds until then.

I didn’t test this this in all sorts of situations, so there probably are cases where sticky doesn’t work like you’d want it to.

Would be great if you could provide example code. It’s a bit hard to understand the problem you described above.

[jouni]

I tried to replicate the case that you described, the best I understood. Feel free to ”remix” the example: https://glitch.com/~peppermint-rambunctious-entree

It does have an issue in Safari, where the sticky prefix element scrolls out of view (inside the text area) when you scroll far enough.

[mil3stone]

Any update on including min-rows / max-rows for a fixed textarea height since the start of this issue back in 2017?

[OlliTietavainenVaadin]

Workaround for Java, assuming there's an internal <textarea> element in light dom:

TextArea textArea = ...
textArea.getElement().executeJs("$0.getElementsByTagName('textarea')[0].setAttribute('rows','1');$0.getElementsByTagName('textarea')[0].style.minHeight = 0;", textArea.getElement());