Scrolling issue, what's the correct way to make my form items full width ?

[ellisd5]

What is the correct way to make form fields 100% width of the container there in ?

I currently use a utility method to make all the form items full width...

public static void setFieldWidths(DynamicForm form) {
for (FormItem formItem : form.getFields()) {
    if (!(formItem instanceof ButtonItem)) {
        try {
            formItem.setWidth("100%");
        } catch (Exception ex) { //NOSONAR
            //Do Nothing on client
        }
    }
}
}

Which gives me something like this...

                                       v---- Edge of the page
+--------------------------------------+
| Label     |{========================]|
+--------------------------------------+
| Label     |{========================]|
+--------------------------------------+

The issue comes when I use form.setWrapItemTitles(true)

So without this set I might have something like this...

                                       v---- Edge of the page
+--------------------------------------+
| Very Long |                          |
| Label     |{========================]|
+--------------------------------------+
| Label     |{========================]|
+--------------------------------------+

With it set this Happens...

                                       v---- Edge of the page
+--------------------------------------------+
| Very Long Label |{========================]|
+--------------------------------------------+
| Label           |{========================]|
+--------------------------------------------+

So it seems the form fields get a maximum with based on the width available when the labels are not wrapped, but with the wrapping, the label columns width are extended and that causes horizontal scrollbars to appear which I don;t want, makes the form look very untidy.

I hope I've explained this well enough with those text drawings. So what is the correct way to do this? setWidth to "100%" or "*" seem to give the same behavior, there's no setWidth100() for FormItems, how is this to be achieved?

Thanks,
Dale

[Isomorphic]

It's not clear why you have this loop-code to set item-widths, rather than setting them when you create the items...

But, you probably just want to make your DynamicForm width: "100%", and then have the item's fill that space - with the form at width:"100%", your use-case may Just Work (tm) - if not, you'll need to setWidth("*") and possibly setColSpan("*") on the formItems.

[ellisd5]

Thanks for the reply, the loops not important, I didn't really need to post that bit, sorry that confuses it, the reason for it is it just cuts down on code, I've got loads of forms most of which I'll set the fields width to "100%", rather than adding an entry for every field I add one line at the end to set them all.

So some forms I do set the fields them without calling that method, it makes no difference, the problem is the same. Whether I set fields to 100% or "*" also makes not difference, the issue is the same.

I don't really understand the suggestion about colSpan, the colSpan's are correctly and total to the number available in the table, I also have a dynamic form builder where the problem is most noticeable, the colSpan are configurable and are set by config depending on how they want to position the field, so setting colSpan to "*" would be overwriting so isn't an option.

The only reliable sollution I have come up with so far so to set the form column widths (form.setColWidths()) however that only works if I know how long the labels are which I don;t in my form builder.

[Isomorphic]

The DynamicForm would likewise have to measure the length of each item title in order to know the exact pixel width to assign to controls. This is an expensive operation since it would basically involve offscreen rendering, so we currently don't do it by default.

It also has limited use. Consider a mixture of date, spinner, and ordinary text inputs. Beyond a certain threshold size, most types of inputs actually have poorer usability (consider the spinner up/down icons or date chooser icon getting pushed all the way to the right), and a mixture of super-wide and fixed-sized controls looks bad.

This means that applying the sizing you're shooting for to a typical form makes it less usable and also less visually pleasing, so we'd suggest leaving the default sizes alone and simple centering the form in the available space.