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.

To enter a block of code:

  • enter empty line after your previous text
  • paste or type the code
  • select the code and press the button above
Preview: (hide)
Evgeny's avatar
13.2k
Evgeny
updated 13 years ago
Samuel's avatar
425
Samuel
asked 13 years ago

Comments

yep, width on inline elements does not work.
Evgeny's avatar Evgeny (13 years ago)
fixed in 0.6.95
Evgeny's avatar Evgeny (13 years ago)
successfully tested. Thanks.
Samuel's avatar Samuel (13 years ago)
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;
}

To enter a block of code:

  • enter empty line after your previous text
  • paste or type the code
  • select the code and press the button above
Preview: (hide)
Samuel's avatar
425
Samuel
updated 13 years ago, answered 13 years ago
link

Comments

Will be done in an hour or two.
Evgeny's avatar Evgeny (13 years ago)
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 (13 years ago)
see more comments