FormLayout: optionally turn off auto width calculation for items and allow setting item width manually

[sergetania]

The FormLayout component will benefit from adding an option to disable auto width calculation for layout items and also adding an API to manually set item width. Currently, the form layout always sets the width of all columns to be the same. For example, a layout with 3 items will have item widths set to 33%(roughly) of the overall width

However, when the actual field widths vary this results in the following

In certain cases, it is very helpful to have manual control over the width of the layout. For example, a page may have multiple layouts with many input fields to enter personal information that includes address. It is very convinient for the user to see the street address, city and state fields on one line and these 3 fields do not have the same width (state abbr is very short). It is not practical to use a horizontal layout because we want the same features for the address fields as for the rest of the fields on the page that are items in form layouts - labels, responsiveness, etc - these are provided by the form layout component.

Here is an example when the generated item width is turned off

which results in perfectly placed fields in a form layout

The form layout needs an option to turn off setting the width of all items to the same value and an API to manually set item width (though the width of the field an item contains is known but currently ignored because all items must have the same width)

[web-padawan]

Thanks for the issue. Please see also vaadin/vaadin-form-layout#96 where this was reported with a potential workaround:

To make it work, you need to wrap each field in another element

As you already use vaadin-form-item, you could try setting width on the fields as shown there.

[sergetania]

Serhii,

Thanks for the suggestion. Before I posted the issue, I have tried setting the width on the vaadin-form-item elements but that gets overridden by the calculated width. That is exactly what I want to stop, just give me an option to do so. It seems it may be easier from HTML like shown in vaadin/vaadin-form-layout#96 but not from Java. FormLayout stamps all items with the calculated width, same for all. Really annoying. Could someone help disable that, please? Thanks a lot!

Sergei

[web-padawan]

@sergetania the DOM structure that is needed to set fields width looks like this:

<vaadin-form-layout style="max-width: 40em">
  <div>
    <vaadin-text-field label="First name" style="width: 20em"></vaadin-text-field>
  </div>
  <div>
    <vaadin-text-field label="Phone" style="width: 10em"></vaadin-text-field>
  </div>
</vaadin-form-layout>

As you can see, in this case vaadin-text-field components are not affected:

There is no other option to disable width calculation at the moment. I agree this is not the best developer experience.
And this is exactly what vaadin/vaadin-form-layout#96 is about.

[sergetania]

@web-padawan But this is exactly what I have. I have widths on the elements inside of the vaadin-form-item. In your example, the vaadin-text-field components ARE affected but you don't see it because you only have two fields in the row. Add one more, and you may get what I have included in the original post. Sure, you can adjust the total width so the problem does not look that extreme but more like the following

Still, this is not good enough. Honestly, the form layout is not suitable to contain fields with widths that vary greatly. This is a bug that everyone continues to call a feature and refuses to address. I have complained about this a year and a half ago. I keep hearing that managing the width is complex and also the component is too complex but it is great because it is responsive. It is great but I can't use it because I can't make it look good. There is nothing complex about what I am requesting here. Just give me an option to manage the widths and I will stop complaining about this. Sorry about the rant but I am fed up with complaints from our users because our pages look crappy.

[rolfsmeds]

@sergetania I agree -- the FormLayout is not suitable for more complex forms where you want proper control over field size, layout, etc, but is best suited to forms where you don't have to care about those much as long as it scales responsively.

We will start working on a solution as soon as we've done some more research into what features we want to support (although obviously better control over field size is one of the most important ones). Ideas are welcome!

[sergetania]

@rolfsmeds Thanks! Here is an idea - often it is better to give a bit more control to the developers who use the component instead of trying to make the component smarter. There are certain specific cases that are not necessarily common. Trying to make the component smart to handle everything may be a daunting task indeed. Optionally, allow the users of the component to control the width. This change can't be that hard. Don;t worry along with the width I will also setup the responsive steps - there is no threat to the responsiveness.
Then the ongoing research may continue - seriously, 81 weeks ago(as dated in a chat) Tatu said you guys are researching it. :-)

[rolfsmeds]

Unfortunately we have not been able to research the topic in the past months due to other ongoning projects, so it's really more about finally continuing it after a very long break.

But we'll have a look if field auto-width calculation can be disabled without causing other issues in the current FormLayout. I do feel that the responsiveness would still need to work out-of-the-box, as without that there is not much point in FormLayout at all.

In the mean time, a similar responsive form with more flexibility can be fairly easily built e.g. with Divs or Horizontal/VerticalLayout.

[sergetania]

@rolfsmeds Thanks a lot! I will continue to hope. That's what happens to enhancements vs bugs - there is always something more important.
I don't think it is that easy to build an alternative form layout. Our pages have lots of input fields within a number of form layouts. We can't replace just a few of those without matching responsiveness and label placement. If we have to implement a new layout to replace form layouts everywhere and you think it is fairly easy then I am confident you will find that disabling the width calculation is a walk in a park for you guys and we will see it done soon! ;-)
Cheers!