[Answered ]-How to reorder the form elements when rendering in template in Django

by

1👍

✅

The easiest solution I could come up with, involves rendering each form field individually in your HTML, as opposed to using as_p. This allows for you to add CSS classes to the paragraph elements, structure the paragraph elements in divs, or any other way you could imagine structuring your HTML document.

HTML Template:

<!DOCTYPE html>
<html>
<head>
  <style>
    .whole {
      display:flex;
    }
    .half {
      box-sizing:border-box;
      display:inline-block;
      width:50%;
    }
    .right {
      text-align:right;
    }
  </style>
</head>
<body>
<h2>Search</h2>
<form method="POST" id="bold-form">
  {% csrf_token %}
  <div class="whole">
    <div class="half">
      <p><label>{{form.numbers.label_tag}}</label> {{form.numbers}}</p>
      <p><label>{{form.categories.label_tag}}</label> {{form.categories}}</p>
      <p><label>{{form.capacities.label_tag}}</label> {{form.capacities}}</p>
      <p><label>{{form.advance.label_tag}}</label> {{form.advance}}</p>
    </div>
    <div class="half right">
      <p><label>{{form.sort_by.label_tag}}</label> {{form.sort_by}}</p>
    </div>
  </div>
  <input type="submit" class= "submit submit-right" value="Search" />
</form>
</body>
</html>
👤ellis

Leave a comment