Move login dialog to the Middle of the screen?

[former_member269453]

Hi ..

i want to move the login dialog to the middle of the screen.. (the app has to run both on mobile and desktop, so the dialog should come in the middle)

i have used sap.m.

code snippet:

var ologinBar = new sap.m.Bar({

                     contentMiddle : [ new sap.m.Button({

                           text : "Login",

                           width : "200px",

                           press : [ oController.loginPress, oController ]

                     }), ]

              });

              var oList = new sap.m.List({

                     items : [ new sap.m.InputListItem({

                           label : "Username",

                           content : new sap.m.Input({

                           placeholder:"Enter User name",

                           value : "{app2>/Username}"

                           })

                     }), new sap.m.InputListItem({

                           label : "Password",

                           content : new sap.m.Input({

                           placeholder:"Enter Password",    

                           value : "{app2>/Password}",

                           type : sap.m.InputType.Password

                           })

                     }) ]

              });

              var oDialog = new sap.m.Dialog({

                     id : "idDialog", // sap.ui.core.ID

                     // icon : undefined, // sap.ui.core.URI

                     title : "Authentication", // string

                     showHeader : true, // boolean, since 1.15.1

                     stretchOnPhone : true, // boolean, since 1.11.2

                     stretch : false, // boolean, since 1.13.1

                     justifyContent : sap.m.FlexJustifyContent.Center,

                     content : [ oList, ologinBar ], // sap.ui.core.Control

              });

Topic was edited by: Michael Appleby

[former_member269453 · Accepted solution]

Hi i used this in css style sheet...

#idDialog{

  position: fixed !important;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

but all i wanted to have a responsive design of the login screen.

[Former Member · Accepted solution]

Hello,

It seems that your problem has been resolved, and i think its responsive as well,

have a look into your output on click of that phone symbol in the console. it shows the responsiveness in your output.

[Private_Member_15166 · Accepted solution]

sap.m library with bluecrystal theme will be responsive. If you are using bluecrystal theme then no need to worry..!!

Goto Emulation tab of chrome browser and you can test it for different mobile, Ipad and iphone etc.

Regards

Dhananjay

[Private_Member_15166 · Accepted solution]

Hi,

Did you checked your code in Safari browser??

This will not work properly.

Use this code.

#idDialog{

position: fixed;

top: 50%;

left: 50%;

/* transform: translate(-50%, -50%); */

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

This will work properly for all browsers.

Please let me know if you find this interesting.

Best Regards

Dhananjay

[Private_Member_15166]

Is your problem still not resolved?

[former_member182372]

interesting, why it is left aligned, by default it is center

Dialog.prototype.open = function(){

....

oPopup.setPosition("center center", "center center", window, "0 0", "fit");

....

JS Bin - Collaborative JavaScript Debugging</title>  <link rel="alternate" type=&...

whats SAPUI5 version? how do you open that dialog?

[former_member269453]

yes its working.. but maksim i want the dialog to be fully responsive(means my label should be adjusted as per my device.) right now when i select some other device(like blackberry z10 or something ) i see the username not coming fully. so my actual intention was to find out how to make the dialog full responsive. initially i have added this style sheet which was working..

[Private_Member_15166]

Hi,

Use this code in your style sheet and modify it if something is not working.

.sapMInputBasePlaceholder {

color: #707070;

font-size: 0.875rem;

font-style: italic;

position: relative;

line-height: normal;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

text-overflow: ellipsis;

white-space: nowrap;

overflow: auto;

line-height: 2.5rem;

padding: 0 0.75rem;

}

.sapMILILabel {

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: auto;

flex: initial;

white-space: normal;

overflow: visible;

text-overflow: initial;

display: flex;

}

.sapMInputBaseInner {

color: #000000;

background-color: #ffffff;

border: 1px solid #bfbfbf;

border-radius: 1;

-webkit-appearance: none;

margin: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: initial;

font-size: 0.6rem;

font-family: Arial,Helvetica,sans-serif;

line-height: normal;

height: 2.5rem;

vertical-align: initial;

padding: initial;

}

Please let me know if it's helpful.

I have checked it for tiniest possible mobile.

Best Regards

Dhananjay

[former_member269453]

appreciate your effort Dhananjay . a silly query i dont want to use the style sheet then how to bring it to the middle?

[Private_Member_15166]

In your code, you are directly using Dialog in your view. So it's taking the starting point of that page or App. Bringing the Dialog box to center is only feasible by CSS.

If you will implement some button and on click of that button or something like that, will always open your popup in the center.

One another option is use of sap.m.FlexBox which will look similar to DialogBox(As per this case but this is not DialogBog) and you don't need to implement any CSS.

Regarding that i have already given a sample code.

This is that development preview.

Regards

Dhananjay

[Private_Member_15166]

Hi,

Write code like this in your view. After that there will be no compatibility issues in mobile or desktop.

       createContent : function(oController) {

              var ologinBar = new sap.m.Bar({

            contentMiddle : [ new sap.m.Button({

                  text : "Login",

                  width : "200px",

                  press : [ oController.loginPress, oController ]

            }), ]

});

var oList = new sap.m.List({

            items : [ new sap.m.InputListItem({

                  label : "Username",

                  type: sap.m.ListType.Inactive,

                  unread: true,

                  content : new sap.m.Input("username",{

                  placeholder:"Enter User name",

                  })

            }),

              new sap.m.InputListItem({

                  label : "Password",

                  type: sap.m.ListType.Inactive,

                  unread: true,

                  content : new sap.m.Input("password",{

                  placeholder:"Enter Password",   

                  type : sap.m.InputType.Password

                  })

            }) ]

});

              var panel1 = new sap.m.Panel ("panel1",{

                     width: "300px",

                     height: "400px",

                     //headerText: "Enter Employee Number",

                     content: [

                               oList, ologinBar

                               ]

              });

              var flexbox = new sap.m.FlexBox({

                     height: "100%",

                     width: "100%",

                     justifyContent: sap.m.FlexJustifyContent.SpaceAround ,

                     alignItems: sap.m.FlexAlignItems.Center,

                     direction: sap.m.FlexDirection.Column,

                     items: panel1,

                     displayInline: true

              });

              //Declaration of page

              var page1 = new sap.m.Page({

                     title: "Login",

                     enableScrolling: false,

                     content: [

                               flexbox   

                               ],

                     footer: new sap.m.Bar({

                           id: "page-footer",

                           contentMiddle: [

                                           ],

                     })

              });

              // Declaration of App

              var app1 = new sap.m.App ({

                     id: "app1",

                     backgroundOpacity: 0,

                     pages: page1

              });

              return new sap.m.Shell({

                     app: app1

              });

       }

And just write a simple CSS in index.html like this:-

<style type="text/css">

.sapMILILabel {

overflow: inherit;

}

</style>

[Former Member]

Hello DM,

try this by adding into css file,

.sapMDialog {
  position: initial;
  background-clip: padding-box;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-timing-function: inherit;
  -moz-animation-duration: 0.1s;
  -moz-animation-timing-function: ease-in;
  animation-duration: 0.1s;
  animation-timing-function: ease-in;
  max-width: 100%;
  max-height: 100%;
  overflow: overlay;

hope it solves ur problem,

[Former Member]

Hi..

          Add Style class to dialog box. Use this class in CSS

.dialogbox {

margin: 100px 500px;

}

Regards,

Sushmita

[former_member269453]

Hi Sushmita..

Thanks for you reply.. i have used a css class in the first place., but when you run the app in both the desktop and mobile version there is some styling issue ie: u arranged it for desktop , then for mobile the screen doesn't come in the middle and reverse. so i was searching for an alternate solution.

[Private_Member_15166]

Hi,

Use flexBox like this.

var panel1 = new sap.m.Panel ("panel1",{

width: "300px",

height: "400px",

//headerText: "Enter Employee Number",

content: [

label1, input1, button1, html1, button2, html1

]

});

//Declaration of FlexBox

var flexbox1 = new sap.m.FlexBox("flexbox1", {

//fitContainer: true,

height: "100%",

width: "100%",

justifyContent: sap.m.FlexJustifyContent.SpaceAround ,

alignItems: sap.m.FlexAlignItems.Center,

direction: sap.m.FlexDirection.Column,

items: panel1

  });

Regards

Dhananjay

[santhu_gowdaz]

Hi D M,

Develop your application through this link,

html - SAPUI5 - Login Page - Stack Overflow

[Former Member]

Usually on any event (say button press), dialog shows up at the middle.

Dialog - sap.m

Look at the source code.

Why not use a simple sap.m.Input , Label and use span property to adjust the position. Why complicate things

[former_member269453]

but how can i see the source code? there is no option...

[former_member269453]

the only reason for me doing this is because i wanted to put all the controls in a group and might reuse whenever possible.

[Former Member]

open the console. In that you can see the the source tab