Align UI elements in the center of the page

[Former Member]

Hi @ all!

I have another SAPUI5 question. It's amazing how I can get stuck in such simple things as aligning an UI element in a page. How can I, for example, aling a TextField to the center of a row? The UI elements don't have such a parameter as "align"(and "textAlign" only aligns the text that you type in the TextField, not the TextField itself). It seems that by default the UI elements are aligned to the left when you create them.

Is there anyone who can help with this?

Thanks!

Monica

[Former Member]

Hi Monica,

not quite sure what you mean with "aling a TextField to the center of a row" - do you want to center a textfield in a column of a row?

If yes, then you don't need to use custom css, you can just use the hAlign property of the column.

This code creates a centered checkbox in a column:

oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Checked"}),
    template: new sap.ui.commons.CheckBox().bindProperty("checked", "checked"),
    sortProperty: "checked",
    filterProperty: "checked",
    width: "75px",
    hAlign: "Center"
}));

For those problems I often take a look at the example page which is very helpful...

Greets,

Ben

[Reeha]

thank you 

[Former Member]

Hi Monica,

For this you can use CSS to align any of the UI elements at the center of the page.

Thanks

[Former Member]

In case this subject may be of interest to someone, here's a solution for the mobile part of UI5 (sap.m library).

I usually use the justifyContent and alignItems properties of sap.m.FlexBox to center my controls.

A more general way to put controls in the center of their container may be via CSS ("margin:auto" for instance), but maybe there's a better way to do that for sap.ui.commons library.

Regards,

Jerome

[Former Member]

Hi Monica,

Were you able to resolve above issue?

If yes, can you please share solution?

Thanks,

Hiren

[Former Member]

Hi Chavda,

    You can add TextField or any other controlls to FlexBox or VBox and you can align them using

"setAlignItems" and "setJustifyContent". You can use the following code :

  var layout = new sap.m.VBox("layout", { 

               items:[new sap.m.Input("n1"),

                       new sap.m.Input("n2"),

                       new sap.m.Input("n3"),

               ]

               });

layout.setAlignItems("Center");

layout.setJustifyContent("Center");

Also you can set position using CSS.

Regards,

Vijay.