Hi,
I am trying to use a flexbox inside a page in mobile app. I have placed 3 controls in my flexbox. I want to align the controls in the center of the page.
With my code I find that the controls gets aligned at the center in horizontal direction. However it is at the top in the vertical direction. I want to place the controls in the center along vertical direction also. My code is as follows
var app = new sap.m.App("myApp", {initialPage:"page1"});
// page1 should be displayed first
// create the first page of your application
var page1 = new sap.m.Page("page1", { title: "Welcome",
content:
new sap.m.FlexBox({
width: "100%",
height: "100%",
direction: sap.m.FlexDirection.Column,
justifyContent : sap.m.FlexJustifyContent.Center,
alignItems: sap.m.FlexAlignItems.Center,
items: [
new sap.m.Input({
placeholder: "Enter Username ...",
width : "200px",
}),
new sap.m.Input({
placeholder: "Enter Password ...",
type: "Password",
width : "200px",
}),
new sap.m.Button({
type: "Accept",
text: "Submit",
width: "200px",
}),
]
}),
});
app.addPage(page1);
// place the App into the HTML document
app.placeAt("content");
-------------------------------------------------------
Pls help me where I am going wrong.
thanks and regards,
krishna