Skip to main content

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.


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;

}


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!


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?


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.