Text box Area Expands outside of componenet

I am trying to limit the area that a text box area can expand. Unfortunately It can be expanded outside the range of the container and if the corner grab button is let go it is stuck outside the range of the container and cannot be grabbed again.

I’ve tried to place it in a container but that doesn’t work.

Any help would be appreciated.

Hi @pham.34 and welcome to the forum!

Thank you for reporting this. I’ve been able to recreate the issue and I’ll get it fixed. When the fix is live, it will only affect new apps.

But you can fix existing apps by adding to the app’s theme.css file. Ctrl + F for textarea to find something that looks like this (depending on the theme you are using):

input.anvil-component, textarea.anvil-component, .anvil-component select, .anvil-datepicker input {
  font-size: 16px;
  line-height: 1.5;
  border-radius: 4px 4px 0 0;
  background-color: %color:Surface Variant%;
  color: %color:On Surface Variant%;
  box-shadow: none;
}

And add the line max-width: 100% to that rule. Adding the max-width will prevent the TextArea from expanding larger than it’s parent container.

1 Like