Valentin Valentin -4 years ago 204
CSS Question

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?

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download