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

  • 1
  • Question
  • Updated 3 weeks ago
  • Answered
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.
Photo of Korey

Korey

  • 1,098 Points 1k badge 2x thumb

Posted 3 months ago

  • 1
Photo of Rachel Wilder

Rachel Wilder, Official Rep

  • 110 Points 100 badge 2x thumb
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;
}
Photo of Korey

Korey

  • 1,098 Points 1k badge 2x thumb
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.
Photo of Mike Dwyer

Mike Dwyer

  • 3,330 Points 3k badge 2x thumb
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!


Photo of Rachel Wilder

Rachel Wilder, Official Rep

  • 110 Points 100 badge 2x thumb
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?