0

I'm building a page to enter a blog using Vaadin Flow 23.

Using TextArea I need to either expand the TextArea to fill the available space or make it so the user can resize the text area by clicking the bottom right-hand corner and dragging (or similar).

The problem is that I'm using the TextArea inside a FormLayout. The FormLayout doesn't support 'expand()' or similar and the TextArea lacks the bottom corner drag point we see in many text editors.

I can't remove the FormLayout but am otherwise open to suggestions.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Brett Sutton
  • 3,900
  • 2
  • 28
  • 53
  • Does the FormLayout have components other than the TextArea? How many columns are available in the FormLayout? Did you consider expanding the FormLayout itself? – Tarek Oraby Apr 19 '22 at 07:06
  • The layout has other components and is a single column. Whilst I can expand the layout and make the textarea large I really wanted to give the user the ability to size the field based on what they were doing. This is a feature I use on lots of sites and it makes for a nice user experience. – Brett Sutton Apr 19 '22 at 22:55
  • Resizing the TextArea by making it smaller than the FormLayout should be possible, but I assume it's not possible to make it larger than the FormLayout. – Tarek Oraby Apr 20 '22 at 05:09
  • @TarekOraby I'm expecting the formlayout to grow as the textarea grows. But the first problem is there are no sizing handles on the text area. – Brett Sutton Apr 20 '22 at 05:14
  • You can add resize handlers using a bit of CSS: `TextArea area = new TextArea(); area.getStyle().set("resize", "both"); area.getStyle().set("overflow", "auto");` – Tarek Oraby Apr 20 '22 at 12:39
  • @TarekOraby whilst that shows the resizer you still can't resize the window. I also tried placing it into the TextArea's shadow dom on the input field directly with still no luck. – Brett Sutton Apr 20 '22 at 22:53
  • 1
    It's difficult to say without seeing some code, but my guess is that the TextArea cannot be made larger than its parent FormLayout. It would be easier if you can add some minimal code that replicates what you are trying to do. – Tarek Oraby Apr 21 '22 at 04:54

0 Answers0