Control label to be horizontally aligned with the field

[syaimaamri]

Hi I would like to align the label with control as image below. Is this possible using Custom CSS classes in Orbeon Builder 2016.1? Would appreciate your help.

[avernet]

I thought we already had an RFE for this, but can't seem to be able to locate it. So I've slightly changed the title of this issue, and marked this as an RFE.

For reference, similarly, we'd like to be able to layout radio buttons and checkboxes horizontally, which is covered by #333.

[ebruchez]

Note that in general we prefer the top-aligned labels. See also Design Better Forms - Top align labels.

[ebruchez]

+1 from user

[avernet]

+1 from customer

[avernet]

+1 from evaluator

[avernet]

+1 from user

[ebruchez]

+1 from customer

[ebruchez]

#4190 #4778 would be another way of doing it.

[ebruchez]

+1 from me for some parts of the workflow UI (#3463)

[ebruchez]

In Form Builder, we'd lke this only for some controls. Could we use a label appearance?

<xf:input>
    <xf:label appearance="xxf:left">Label</xf:label>

This would place a class on the enclosing control, for example xxforms-label-appearance-left.

For something form-wide, the issue is a little different as there are alignment questions.

[ebruchez]

• [ ] generate class on control
• [ ] provide CSS to handle class

[ebruchez]

The CSS is easy with CSS grids, harder with other CSS. For Form Builder, we can use CSS grids as all browsers that support Form Builder also support CSS grids.

[ebruchez]

One issue with form-level horizontal labels is that controls must be aligned or the result will be unacceptably ugly.

Ideally, you'd like them to be automatically sized based on content, maybe with a min/max width. But this is probably not possible right now at the level of an entire form even with bleeding-edge CSS, at least without us changing our markup, as we have nested sections and grids.

But we don't necessarily need to do this at the entire form level. Doing it at the grid level is already useful. With CSS grids and subgrids, you can do this for a single non-repeated grid for sure, maybe for repeated grids as well (but we need this less or not at all for repeated grids). But right now, subgrids are only implemented by Firefox, and IE11 doesn't support CSS grids at all anyway.

Without subgrids, it's possible to do it with display: contents if you don't need the intermediary elements to participate to styling/layout (see "Why we need CSS subgrid". I have tried this punctually in Form Builder and it works great. But IE11 still doesn't have CSS grids.

So right now, the only way to have good support at the grid level, probably, is to have a fixed width for the labels, until we don't support IE11 anymore.

Bottom line:

• In the meanwhile, we could go with the "fixed label width" option if we want to support this at the grid or form level.
• For a single control, on the other hand, we could go ahead immediately.

[avernet]

+1 from user

[avernet]

+1 from customer