First time here? Check out the FAQ!
2

align login and password fields

Today, the login and password fields are not aligned. It is not really important but during the testing phase in my company, 100% of the testers told me me it is not beautiful. So I have tried to tune the css to do it,.. and I have found an issue on firefox : the width attribute of a LABEL is not recognized, it collapses to the exact size of the inner text. So it becomes impossible to align the login/password inputs without using a static position which must be avoid.

Evgeny's avatar
13.2k
Evgeny
updated 2011-06-08 22:36:32 -0500
Samuel's avatar
425
Samuel
asked 2011-06-07 09:34:51 -0500
edit flag offensive 0 remove flag close merge delete

Comments

yep, width on inline elements does not work.
Evgeny's avatar Evgeny (2011-06-08 01:06:31 -0500) edit
fixed in 0.6.95
Evgeny's avatar Evgeny (2011-06-08 22:37:44 -0500) edit
successfully tested. Thanks.
Samuel's avatar Samuel (2011-06-09 05:08:58 -0500) edit
add a comment see more comments

1 Answer

1

The good solution is to include these fields in a table. Here is the corresponding patch which is working fine:

diff --git a/askbot/skins/default/templates/authopenid/signin.html b/askbot/skins/default/templates/authopenid/signin.html
index 5cff194..417b421 100644
--- a/askbot/skins/default/templates/authopenid/signin.html
+++ b/askbot/skins/default/templates/authopenid/signin.html
@@ -47,7 +47,7 @@
     {% endif %}
     {% if view_subtype != 'email_sent' and view_subtype != 'bad_key' %}
     <form id="signin-form" method="post" action="{{ settings.LOGIN_URL }}">{% csrf_token %}
-        {# in this branch - the real signin view we display the login icons
+   {# in this branch - the real signin view we display the login icons
             here we hide the local login button only if admin
             wants to always show the password login form - then
             the button is useless.
@@ -91,16 +91,28 @@
                 {% if login_form.password_login_failed %}
                     <p class="error">{% trans %}Login failed, please try again{% endtrans %}</p>
                 {% endif %}
-                <p>
-                    <label for="id_username">{% trans %}Login name{% endtrans %}</label>
-                    {{login_form.username}}
-                </p>
-                <p>
-                    <label for="id_password">{% trans %}Password{% endtrans %}</label>
-                    {{login_form.password}}
-                </p>
+                <table class="login_table">
+                    <tr>
+                        <td>
+                            <label for="id_username" class="login_label">{% trans %}Login name{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.username}}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="id_password" class="login_label">{% trans %}Password{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.password}}
+                        </td>
+                    </tr>
+                </table>
                 <p id="local_login_buttons">
                     <input class="submit-b" name="login_with_password" type="submit" value="{% trans %}Login{% endtrans %}" />
+                </p>
+                <p id="local_account_creation">
                     {% if settings.USE_LDAP_FOR_PASSWORD_LOGIN == False %}
                     <a class="create-password-account" style="vertical-align:middle" href="{% url user_signup_with_password %}?login_provider=local">{% trans %}Create a password-protected account{% endtrans %}</a>
                     {% endif %}
@@ -109,16 +121,26 @@
                 <h2 id="password-heading">
                     {% trans %}To change your password - please enter the new one twice, then submit{% endtrans %}
                 </h2>
-                <p>
-                    <label for="id_new_password">{% trans %}New password{% endtrans %}</label>
-                    {{login_form.new_password}}
-                    <span class="error">{{login_form.new_password.errors[0]}}</span>
-                </p>
-                <p>
-                    <label for="id_new_password_retyped">{% trans %}Please, retype{% endtrans %}</label>
-                    {{login_form.new_password_retyped}}
-                    <span class="error">{{login_form.new_password_retyped.errors[0]}}</span>
-                </p>
+                <table class="login_table">
+                    <tr>
+                        <td>
+                            <label for="id_new_password" class="login_label">{% trans %}New password{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.new_password}}
+                            <span class="error">{{login_form.new_password.errors[0]}}</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="id_new_password_retyped" class="login_label">{% trans %}Please, retype{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.new_password_retyped}}
+                            <span class="error">{{login_form.new_password_retyped.errors[0]}}</span>
+                        </td>
+                    </tr>
+                </table>
                 <p id="local_login_buttons">
                     <input class="submit-b" name="change_password" type="submit" value="{% trans %}Change password{% endtrans %}" />
                 </p>

And here are my modifications in the file askbot/skins/default/media/jquery-openid/openid.css

#password-heading {margin-left:35px;margin-bottom:20px;}
.login_table {text-align:center;}
.login_label {margin-left:95px;}
.login {margin-left:40px;}
.openid-signin .submit-b {
    position:relative;
    top:10px;
    left:280px;
}
.create-password-account {
   margin-left:110px;
   position:relative;
   top:20px;
}
Samuel's avatar
425
Samuel
updated 2011-06-08 03:16:02 -0500, answered 2011-06-07 10:01:22 -0500
edit flag offensive 0 remove flag delete link

Comments

Will be done in an hour or two.
Evgeny's avatar Evgeny (2011-06-08 14:41:12 -0500) edit
Well, done albeit a bit later. I did not take the css changes yet though. Could you insert a screenshot of your login page?
Evgeny's avatar Evgeny (2011-06-08 22:37:29 -0500) edit
add a comment see more comments