cancel
Showing results for 
Search instead for 
Did you mean: 

problem in using flexbox in sapui5

Former Member
0 Kudos

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

Accepted Solutions (0)

Answers (1)

Answers (1)

tom_parsons
Participant
0 Kudos

I expect the problem is that your app/page has sized itself to be only be high enough for your content. Try adding app.setHeight("100%"); after it's definition.

Former Member
0 Kudos

Hi Kumar,

Try this,

In your VIEW,

var flex =  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",

                }), 

            

   ]          

      });

   return flex ;

In Your index.html file,

<script>

  sap.ui.localResources("test");

  var app = new sap.m.App("app",{initialPage:"idView1"});

  var page = sap.ui.view({id:"idView1", viewName:"test.View", type:sap.ui.core.mvc.ViewType.JS });

  

  app.addPage(page);

  app.placeAt("content");

  </script>

Hope this helps.

Regards,

Sharique