Web App alignment?

General
21

[quote=199339:@Andreas West]Hi @Wayne Golding ,

please excuse my newbie question. I’m looking at the “LoginExample” from Xojo which is under “Examples/Web” (LoginExample.xojo_binary_project).

Could you please explain to me how I can change the login page (MainPage) so that it always stays in the middle (centered) of the browser)? If I understand you correctly, this is done by putting the controls into a WebContainer (means all the controls of the MainPage) and then turning off top & bottom alignment.

Is that correct?

I’m trying to build a prototype and this is my first try at Xojo WE. I want everything to stay in the middle of the screen so that different screen size (desktop) won’t have part of the app off the page (need for scrolling). I do understand that access via mobile devices such as tablets and phones will still fail to display the website properly (need to address that responsive design in another forum post).

Thanks in advance for your help,

Andreas[/quote]
Yes. You could do this with container controls. Just put the container in the center of the page (according to the guides) and then turn off both of the locks for the direction you want centered. Ie, left and right for horizontal centering.

22

[quote=199342:@Michel Bujardet]
Try this in the Shown event of LoginPage :

LoginSection.Left = (self.width-LoginSection.Width)/2 Label1.Left = (self.width-Label1.width)/2 RegisterLink.Left = (self.width-RegisterLink.Width)/2 [/quote]
Hi @Michel Bujardet ,

I’ve tried it and it works to center the window but unfortunately it’s clearly visible first on the top left side before it gets moved by the shown event to the middle. Will try to solve it with a WebContainer now but thanks for your suggestions as an alternative, appreciated!

23

[quote=199346:@Andreas West]Hi @Michel Bujardet ,

I’ve tried it and it works to center the window but unfortunately it’s clearly visible first on the top left side before it gets moved by the shown event to the middle. Will try to solve it with a WebContainer now but thanks for your suggestions as an alternative, appreciated![/quote]

If you place everything onto a webcontainer, you can then use the EmbedWithin method to have it appear smack center instead of moving from left to right.The principle remains the same, though, to center it.

http://documentation.xojo.com/index.php/WebContainer.EmbedWithin