Display Django form fields on the “same line”

问题

I would like to display two form fields on the same line and not each one after the other one.

For the moment, I get:

Choice a theme :
   . Datasystems
   . Cameroun

But I would like to display this form like:

Choice a theme:
       . Datasystems                    . Cameroun

My .html file looks like :

{% extends 'Base_Configurations.html' %} 
{% load staticfiles %} 
{% load static %} 
{% block title %}
    <h3> <span class="glyphicon glyphicon-file"></span> Choix du thème DatasystemsEC </align> </h3>
{% endblock %}

{% block content %}

    <form class="form" method='POST' action=''> {% csrf_token %}
        <br></br>
        {{ form }}
        <br></br>
        <input class="button" type="submit" value="Valider le thème" />
    </form>

{% endblock %}

I have also a .css file :

.form-fields {
    border-radius: 4px;
    margin-right: auto;
    width:50%;
    background-color: #f5f5f5;

    }

.form {
    padding-left:8vw;

}

label {
        width: 35%;
        border-radius: 8px; 
        margin-bottom: -20px;
        list-style: none;
}

For the moment, I don't find a way to solve my problem. I looked some tutorials or StackOverflow questions but nothing up to now.

Do you have any idea about this handling?

回答1:

You can do this by Bootstrap grid system. As suggested in the question, By this there will be two fields on each row.

Try this:

  <div class="container">
    <div class="row">
    {% for field in form  %}
      <div class="col-sm-6">
        <b>{{ field.label_tag }}</b> - {{ field }} 
      </div>
    {% endfor %}
    </div>  
  </div>

回答2:

dont use {{ form }}, but manually open the form fields.

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

CSS -

li {
    list-style-type: none; 
    display : inline;
    }

I think it will work. Let me know if it does.

回答3:

You can take a look here https://docs.djangoproject.com/en/1.10/topics/forms/#working-with-form-templates

also if you are using bootstrap you can add the classes that you need in your forms.py

like:

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

or:

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

回答4:

Inline Crispy form: 2 cols per row.

<form method="post" id="id_form" class="mx-auto text-left">
    {% csrf_token %}
    <div class="row">
        {% for field in form %}
            <div class="col-sm-6 ">
                {{ field|as_crispy_field }}
            </div>
        {% endfor %}
    </div>

    <button type="submit" class=" d-block btn btn-lg btn-success mt-4 w-50 mx-auto">
        Save
    </button>
</form>

来源：https://stackoverflow.com/questions/42530325/display-django-form-fields-on-the-same-line

标签

python

html

css

django

django-templates