How to center horizontally some Controls?

[former_member197386]

Hello,

I wish to put some content into my BorderLayout and center it horizontally but it doest work (content if align to jeft).

//Create a layout instance for the login form
var oLayout = new sap.ui.commons.layout.AbsoluteLayout({width:"340px",height:"150px"});
oLayout.addStyleClass("CustomStyle"); //Add some additional styling for the border

var oLabel = new sap.ui.commons.Label({text:"User Name"});
var oNameInput = new sap.ui.commons.TextField({width:"190px"});
oLabel.setLabelFor(oNameInput);
oLayout.addContent(oLabel, {right:"248px",top:"20px"});
oLayout.addContent(oNameInput, {left:"110px",top:"20px"});

oLabel = new sap.ui.commons.Label({text:"Password"});
oPWInput = new sap.ui.commons.PasswordField({width:"190px"});
oLabel.setLabelFor(oPWInput);
oLayout.addContent(oLabel, {right:"248px",top:"62px"});
oLayout.addContent(oPWInput, {left:"110px",top:"62px"});

var oLoginButton = new sap.ui.commons.Button({text:"Login",width:"133px"});
oLoginButton.attachPress(function(){alert("Login with user name '"+oNameInput.getValue()+"' and password '"+oPWInput.getValue()+"'.")});
oLayout.addContent(oLoginButton, {left:"110px",top:"104px"});

(from SAPUI5 SDK - Demo Kit)

appLayout.createArea(sap.ui.commons.layout.BorderLayoutAreaTypes.center, oLayout);
appLayout.setAreaData(sap.ui.commons.layout.BorderLayoutAreaTypes.center, {
  contentAlign : "center",
  visible : true
});

Thanks for your help.

Anthony

[former_member197386]

Thanks, I'm going to try the provided solution

Regards,

Anthony

[former_member182650]

There are some problems with IExplorer using % in CSS.

To avoid this problem, you could use MatrixLayout with 3 columns and widths: ['','50%','']. This will produce a layout with two wrapping columns (left aand right) with the same width, and a central column for your controls. This is an example:

//mainLayoutAux must contain all your view controls

var mainLayout = new sap.ui.commons.layout.MatrixLayout({

         id : "mainLayout",

         layoutFixed : true,

         columns : 3,

         width : "100%",

         widths : [ "", "50%", "" ]

         });

mainLayout.createRow({height: "100%"}, horizontalSpacer1, mainLayoutAux , horizontalSpacer2);

mainLayout.setWidth("100%");

mainLayout.placeAt("content");

This will works fine with all SAPUI5 compatible browsers

[kammaje_cis]

This is what I do. I am not sure if this is the right approach.

Assign a css class to the control using addStyleClass method.

In the CSS, set margin-right and margin left as 'auto'.

I picked this logic from here.