Limiting textarea resize (either vertically or to a certain part of the page)

Questions
,
1

Anyone know if it’s possible to limit a textarea to only vertical scrolling, or otherwise containing it (much like this - https://jqueryui.com/resizable/#constrain-area)?

I have some large text fields that often need truncating or resizing, but right now if I set the rows (so I can resize manually) I can resize the textarea way too far.


2

Yes you can! Vertical and horizontal resizing still respect max-width and max-height values. You’re looking at one line of css. For example this would do the trick on a field editor textarea:

.nx-editor textarea {
    max-height: 100px;
}

3

Rachel: This seems only to affect the textarea itself, not the parent field component. It’s a nice trick to keep in the toolbox, though! Thanks!

4

Hmm, the parent field component should also respond to the resizing/the size of whatever the content is unless you have something set in the theme/custom css for that field editor. 

Original sizing:

At size limit:

Perhaps I am misunderstanding what you’re wanting?

5

Thanks for this! It worked great for my situation. I set it to:

.nx-editor textarea {
    max-width: 100%;
    max-height: 100%;
}

…and now it moves around but doesn’t overlap other boxes.