Question Re: Align UI elements in the center of the page in Technology Q&A

Align UI elements in the center of the page

Former Member — Wed, 08 Aug 2012 07:36:40 GMT

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

Re: Align UI elements in the center of the page

Former Member — Wed, 11 Sep 2013 11:49:58 GMT

Hi Monica,

Were you able to resolve above issue?

If yes, can you please share solution?

Thanks,

Hiren

Re: Align UI elements in the center of the page

Former Member — Wed, 11 Sep 2013 13:37:06 GMT

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

Re: Align UI elements in the center of the page

Former Member — Wed, 11 Sep 2013 15:02:57 GMT

Hi Monica,

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

Thanks

Re: Align UI elements in the center of the page

Former Member — Thu, 12 Sep 2013 06:08:12 GMT

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.

Re: Align UI elements in the center of the page

Former Member — Thu, 12 Sep 2013 07:47:26 GMT

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

Re: Align UI elements in the center of the page

Reeha — Mon, 10 Mar 2025 09:45:15 GMT

thank you