Use the nobr HTML tag on Django form fields

Question

I have been customizing Django form fields using this helpful guide.

Here is the form structure:

class contact(forms.Form):
    first_name = forms.CharField()
    middle_name = forms.CharField()
    last_name = forms.CharField()

This is how the template looks:

<form action="/contact/" method="post">
    {% include "form_snippet.html" %}
    <p><input type="submit" value="Send message" /></p>
</form>

In the form_snippet.html file:

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }}: {{ field }}
    </div>
{% endfor %}

In the CSS stylesheet:

.fieldWrapper{
    font-size: 10px;
    color: #f00;
    font-family: verdana, tahoma, serif;
    white-space:nowrap;
}

After running the server, each form field is displayed on a new line.

I would like to have all three form fields appear on the same line instead of each being on a separate line.

Any suggestions on achieving this layout?

Answer 1

Answer №1

Revise the css code to reflect the following changes:

 .fieldWrapper{
   font-size: 10px;
   color: #f00;
   font-family: verdana, tahoma, serif;
   white-space:nowrap;
   display:inline;
 }

Answer 2

Revise the css code to reflect the following changes:

 .fieldWrapper{
   font-size: 10px;
   color: #f00;
   font-family: verdana, tahoma, serif;
   white-space:nowrap;
   display:inline;
 }

Answer 3

Enclosing every field within a div element, which is considered a block-level element.

Assign a non-block positioning, such as inline, float:left, to the .fieldWrapper class.

Answer 4

Enclosing every field within a div element, which is considered a block-level element.

Assign a non-block positioning, such as inline, float:left, to the .fieldWrapper class.

Answer 5

Since the div element is a block-level element, it's effective to place the div tag outside of the 'for' loop:

<div class="fieldWrapper">
  {% for field in form %}
    {{ field.errors }}
    {{ field.label_tag }}: {{ field }}
  {% endfor %}
</div>

Alternatively, you can achieve the same result without using an external CSS class:

{% for field in form %}
    {{ field.errors }}
    <nobr> {{ field.label_tag }}: {{ field }}</nobr>
{% endfor %}

Answer 6

Since the div element is a block-level element, it's effective to place the div tag outside of the 'for' loop:

<div class="fieldWrapper">
  {% for field in form %}
    {{ field.errors }}
    {{ field.label_tag }}: {{ field }}
  {% endfor %}
</div>

Alternatively, you can achieve the same result without using an external CSS class:

{% for field in form %}
    {{ field.errors }}
    <nobr> {{ field.label_tag }}: {{ field }}</nobr>
{% endfor %}