Login screen - Centered

[Edvard]

My sales persons claims, that my webapp is 100 % unusable before I center the promt and the entry field instead of placing it as defalt on the left.
Sometimes that makes me wonder how to get rid of him....
I have been fighting it quite a while now (Weeks), but absolutely no succes.
Where to start (Must be something with CSS, or is it HTML?), and how to?

best regards

Edvard Korsbæk

[Edvard]

Attached a screenshot - The login and password should be placed under the 'Easyplan' image

Best regards

Edvard Korsbæk

[attachment deleted by admin]

[Robert Iliuta]

Hallo Edvard,

I call a static page for login in my web system. See attached example.

Find comment in this html page <!--LOGIN FORM HERE--> and modified the left and top position .... this way is very easy because you don't need to recompile you app, just modify the html page and do a refresh.

You need to modify the name of the login procedure Net:F_Login with yours. Also the style of my login form is set to none.

Good luck,
Robert

[attachment deleted by admin]

[Bruce]

Hi Edvard,

Yes, for specific forms, this can "mostly" be done.

I say "mostly" because it's done with CSS, but the CSS is different for IE7 than for everything else, and in IE6 it doesn't work at all.

The second catch is that you have to specify the width of the form - exactly. In other words, the browser can only center it if it knows exactly how wide it is. Usually this is uncool - you don't want to specify width if you can help it, but if want to then you can.

You want to be using version 5.13 or later. This contains the CSS for you, so you don't have to do it yourself.

So with those caveats in place, what must you do?

a) create a custom css file for your app, if you don't have one already.
In it create a style that sets the width to a fixed number of pixels;

.cus-width-300{
width: 300px;
}

b) in your form, CSS Classes tab,
Override Global Settings ON
Form Div: ' nt-fix-center cus-width-300'
note the leading space.

Since we now do popup forms, which also require a width so they can center properly, it may be possible to use that setting in this scenario, removing the need for the custom width class. which I guess would be nice.

Cheers
Bruce

[peterH]

Hi,

A couple of corrections to Bruce's answer 

I've found that I can do it without setting a fixed width - and I'm using 5.09!
Please note that I've not tested with popup forms.

On the NetWebForm procedure I enter my class in the Form Div field, eg. 'centerForm'.

And in my custom css I define this:

.centerForm {
margin-left:auto;
margin-right:auto;
width:25%;
}

You may have to tweak the percentage depending on the width of your form fields. Other than that, it works like a charm.

Peter

[Bruce]

Hi Peter,

great post - really. It's a good opportunity to compare approaches.

Regarding the centering, my initial instinct was that your approach wouldn't work correctly in all the browsers - there are differences between IE7 and the rest - but it lead me to investigate, and indeed the case of center-justifying is slightly different to the case of top-center and bottom-center.
(top-center, and bottom-center are more complicated).

The 'nt-fix-center' class in my example does what yours does, ie
position:relative;
margin-left: auto;
margin-right: auto;

I also included
left:0;
right:0;
thinking this was necessary in some cases, but it's not (as long as position: relative).

I'll tweak the build, but we're both on the same page here.

Now - regarding the width. You changed it from 300px to 25%.
The danger with this change is that you are relying on the browser window being some known width, whereas mine is being explicit as to the size required.

So as a browser window gets smaller, in my approach, the "margins" are the bits getting smaller, until the window is < 300 pixels wide. In your approach both the margins _and_ the form get smaller - so there is still space being taken up by the margins, even when there's not enough space for the form properly.

Given the size of desktop monitors these days that may not seem like a big deal, but remember there are lots of non-pc devices out there, some (like tablets or phones) with much smaller displays.

Lastly;
>> and I'm using 5.09!

What are you? some kind of dinosaur?
That's, like, soooo last week !

Cheers
Bruce

[Edvard]

Thanks both!
It took quite some time to get it to work.
Not that your solutions had faileures, but I had to get through all details.
1 : Remember to add custom.css to the Webserver procedure.
2 : Spell it correctly. I try allwasy to remember to use CTRL-C CTRL-V for names & variables. Its so easy to maje misspellings. And here you do not get any of the usual help from the generator.

But Firebug was a help. As i never saw 'custom.css'  and only netweb.css, i began to concentrate on that.

Again - Thanks Both!
Cheers

Edvard Korsbæk

[Alberto]

Bruce, I have 5.15
Just adding ' nt-fix-center' to the Form Div I get the form centered?

Thanks
alberto

[Bruce]

No Alberto, you need to set a width for the form as well.

(And bear in mind this is just for "page" based forms - popup forms are already centered.)

Cheers
Bruce