No longer possible to set a maximum height?

[kevinrenskers]

After updating to v3, setting a max-height on the textarea no longer has an effect. Is there another way to limit how tall it can grow?

[kevinrenskers]

Not sure why fit-textarea now uses min-height instead of just height 🤔

[fregante]

Not sure why fit-textarea now uses min-height instead of just height 🤔

https://github.com/fregante/fit-textarea/issues/9

Is there another way to limit how tall it can grow?

Honestly I don't know how/if both methods can be supported

[kevinrenskers]

so to fix this I should probably use min-height or the rows attribute instead

I wonder if using the rows attribute would allow both scenarios? So manual resizing and still able to set a max-height.

For now I'm just pinning to v2.x.

[fregante]

Interesting… I think the reason why I never tried that is because:

• the measurement I get is in pixels
• the line height varies so it needs to be evaluated as well

Since v3 changed how it’s measured altogether (to a more efficient version) maybe I can reliably find the number of rows. Bonus would probably be that #2 would be natively supported

[kevinrenskers]

Create a hidden textarea using the same style, remove all padding, set rows to 1, and measure size? 🤔

[fregante]

Maybe, if there’s no rounding. I hope that a whole other textarea isn’t necessary because v3 is already a lot more complex than v2 since it already clones the textarea instead of resizing it twice for every character

[leafac]

I too would like to set a maximum height. What if we took that as a JavaScript argument in fit-textarea (or check a data- attribute, or something equivalent to that)?

[cheap-glitch]

Honestly I don't know how/if both methods can be supported

As a stopgap solution, how about detecting if the textarea has explicitly been made non-resizable?

textarea.style.resize === 'none' || textarea.style.resize === 'horizontal' // use height instead of min-height

Might be useful to allow overriding this, like with a data- attribute as suggested above.

[cheap-glitch]

maybe I can reliably find the number of rows

Isn't it as "simple" as textarea.scrollHeight / line height?

The main headache would be to compute the line height in pixels since it can have a bunch of different values and units.

---

Or maybe switch to an (almost) pure-CSS solution: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas Does not work with manual resizing though…

[fregante]

switch to an (almost) pure-CSS solution

That's a solution we can link to in the readme, but it wouldn't work on extensions because we don't want to change the DOM.

Moving the rows suggestion to:

• https://github.com/fregante/fit-textarea/issues/21