1

I am using django-crispy-forms to style the login form of the django-allauth login.html 

  <form class="login" method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}
    {{ form|crispy }}
    {% if redirect_field_value %}
    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
    {% endif %}
    <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
    <button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
  </form>

However, the form {{ field.label }} is not "inline" with the {{ field }}. Is there a simple way to make them inline while still using django-crispy-form or something similar to polish the appearance?

I also want to learn how to hide the {{ field.label }} on display. The only thing I can think of is to loop over the fields of forms, and comment out the label display on the following answer.

Django Forms and Bootstrap - CSS classes and <divs>

chem1st
  • 1,624
  • 1
  • 16
  • 22
thinkdeep
  • 945
  • 1
  • 14
  • 32
  • What does "the form label" mean? Do you need to hide field label in form? You can set empty labels in forms.py to achieve the desired result, like this: `somefield = forms.CharField(label='', ...)` – chem1st Oct 07 '15 at 20:31
  • forms need the label. but I donot want to display them. Question is updated to clarify – thinkdeep Oct 07 '15 at 20:43
  • The input itself can be of a hidden type, not the label. What is the reason to pass the hidden label? – chem1st Oct 07 '15 at 20:58
  • say, I have a sign in field which has placeholder text "email", so the field label for email field does not need to be displayed then. – thinkdeep Oct 07 '15 at 21:58
  • That's what I've said - you can set it to empty then. At last, you do not need it in that case. – chem1st Oct 07 '15 at 22:03

2 Answers2

1

Yes, you can make labels be inline with the fields they are related to. Use custom css to rewrite bootstrap.css. To be more specific, you need to make div.controls, containing input and error message, display as inline-block:

div.controls{
    display: inline-block;
}

Depending on your current page styles, what stuff (fields, labels, error msgs, etc.) you want to render on a page and how it should look (for example, in a line with error msg or not), you might need to also change width and display properties of input.form-control and error messages.

In order to hide labels set it to empty in forms.py:

somefield = forms.CharField(label='', ...)

This will make the label disappear.

chem1st
  • 1,624
  • 1
  • 16
  • 22
0

I found the django-widget-tweak package, which allows finer control of each field in django forms.

thinkdeep
  • 945
  • 1
  • 14
  • 32