panel centered in screen

[HarryDeBoer]

Hi,

I want to start my application with a login panel in the center of the browser screen. What's the -easiest- way to do that?

Regards, Harry

[Jon]

There's more than one way to do this. One easy way is to set the layout of the root control (the Page Control) to Vertical Box then click Layout Properties and set both horizontal alignment properties to Center. If you don't have anything declaring a specific page width e.g. a body style, this should work OK.

Regards
Jon

[HarryDeBoer]

Hi Jon,

I followed your instructions (new testform). The panel is horizontally aligned but not vertical! (so it's on top of the screen). I did a workaroud with an inline style that worked, but still wonder if this can't be done the 'layout' way.

Regards, Harry

[Jon]

Vertical alignment is harder because it needs an explicit height specification e.g. set up a Panel and give it a height of say 800px, then you can see that a vertical alignment of Center will work (tip: set a background colour so you can see what's happening). This works with an explicit height, but if you change this to a height of 100% it doesn't work; this is because 100% means 100% of the parent HTML element and so on back to the body tag. So without an explicit height set somewhere, it doesn't do anything. There may be a clever CSS way of setting the height to the current window height, but I don't know how to do this.

Regards
Jon

[HarryDeBoer]

Hi Jon,

this did the trick (panel is 400x400):

position:fixed;
z-index:100;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:400px;
height:400px;