Centering Form Items using CSS

[HankFay]

I have 5 formitems stacked in a form section.

I would like to center these forms items in the section.

I've tried this (in the stylesheet for the section):

lianja_ui_section_formitem {
width: 350;
margin: 0;
margin-left: auto;
margin-right: auto;
}

but no joy.

thanks,

Hank

[barrymavin]

Form sections are specifically designed to lay out their contents (Formitems and Gadgets) for a responsive UI so that they occupy space irrespective of the geometry of the viewport.

Trying to use CSS to override the behavior of the layout engine will not work.

If you want to center a form section (You did not not mention so I am making an assumption here), the way to do it is to use dividers. One on the left and one on the right.

The layout engine will then layout the form section as three equally sized "columns" with your formitems in the middle.

[HankFay]

Form sections are specifically designed to lay out their contents (Formitems and Gadgets) for a responsive UI so that they occupy space irrespective of the geometry of the viewport.

Trying to use CSS to override the behavior of the layout engine will not work.

If you want to center a form section (You did not not mention so I am making an assumption here), the way to do it is to use dividers. One on the left and one on the right.

The layout engine will then layout the form section as three equally sized "columns" with your formitems in the middle.

I've used columns to divide the form section into 3 parts. The downside is that when the form section shows half-wide, the formitems are now 1/6 of the original form width.

The margin: 0 and margin-left: auto, etc., is specifically designed for responsive ui, to center objects in the middle of the display space. With this concept, the formitems can remain their designed size right down to their width (if it's been set). This for the most part shouldn't be an issue with desktop or browser displays, but I would think having the dividers on each side would cause the UI display to suffer when moved to mobile.

Anyway, onward,

Hank

[barrymavin]

Yes I know what the CSS does but the layout engine overrides CSS positioning.

The Mobile client has its own layout engine and lays out UI elements depending on if the have been checked as "Mobile". This allows one App to function on different devices.

Adding a gadget "Component" with a fixed width with two dividers either side may do the trick,

[HankFay]

Yes I know what the CSS does but the layout engine overrides CSS positioning.

The Mobile client has its own layout engine and lays out UI elements depending on if the have been checked as "Mobile". This allows one App to function on different devices.

Adding a gadget "Component" with a fixed width with two dividers either side may do the trick,

Ah, thanks.

Now, if a column divider would be "fixed width" (or not), the two on the sides could be made "not" and the issue would be handled, also: don't know how feasible this is.

thanks,

Hank