Textarea with auto-grow with content enabled and moving buttons


I have a form with a textarea with the option "Auto-grow with content" enabeld and under the textarea I have 2 buttons that are located next to a select component. The data for the form is retrieved from a rest service.
Depending on the amount of characters for the textarea the 2 buttons are automatically moved on the form but don't stay located next to the select component. See screenshot below.

How can I avoid this?

Hi @Robby_Ceyssens! I definitely see what you're talking about. Seems like only the column of components directly underneath the Text Area is what gets pushed down.

I created an internal bug report for this, and in the meantime, I found a workaround for you :smiley: If you put your Selects and Buttons into a Container, they'll move down together. To make the Container "invisible", remove the Header and uncheck the "Show border" box.

I also found that using Divider components works (the Select and Button will get pushed down together), though I understand that you likely want to save the Dividers to actually separate sections in the form.

Let me know if this works for you!


I also tried the workarounds you mention.

The container solution isn't perfect because it adds some margins around the fields which you can't remove.

I also tried a divider but I didn't tried to place it directly above the fields with the buttons on the right which does work.

So thanks for the tip!

Ack, gotcha :\ I'm sorry those workarounds didn't work for you. I'll keep you updated if we make any progress on the bug!

Just to be clear, your second workaround with the divider directly above the fields with buttons on the right did work for me.

Ah! Got it. Reading can be hard sometimes :sweat_smile: Thank you for clarifying and glad it worked until we can now permanently address this. I’ll keep you posted in this thread :+1: