Inline forms tuning

[MaartenUreel]

I tried to render an "inline form" with Django, as displayed here:
https://getbootstrap.com/docs/5.1/forms/layout/#column-sizing

I ended up having to use a bunch of weird workarounds to make it look okay:

        self.helper.layout = Layout(
            # One label for both date controls
            Div(HTML(f'<label class="col-form-label">{date_filter_label}</label>'), css_class="col-auto mb-3"),
            Field("date_after", wrapper_class="col-auto"),
            Div(HTML("-"), css_class="mb-3 col-auto"),
            Field("date_before", wrapper_class="col-auto"),
            Div("detailed", css_class="col-auto"),
            Div(Submit("submit", _("Display")), css_class="mb-3 col-auto"),
        )

I am fairly new to Crispy to I might have approached it wrong, but what I did notice is that:

• every field is wrapper in a mb-3, so I had to fix that in some other divs
• wrapper_class did not work for checkbox, because it's being wrapper in another div with mb-3

This is now the result

<form class="row gy-3 align-items-center" method="post">
  <!-- This mb-3 I don't want, but I had to to make it aligned with the rest. -->
  <div class="col-auto mb-3">
    <label class="col-form-label">Date range</label>
  </div>
  <!-- This mb-3 I don't want, but it's in the field template -->
  <div id="div_id_date_after" class="mb-3 col-auto">
    <input type="text" name="date_after" value="12/11/2021" class="dateinput form-control" required="" id="id_date_after">
  </div>
  <div class="mb-3 col-auto">
    -
  </div>
  <!-- This mb-3 I don't want, but it's in the field template -->
  <div id="div_id_date_before" class="mb-3 col-auto">
    <input type="text" name="date_before" value="12/12/2021" class="dateinput form-control" required="" id="id_date_before">
  </div>
  <!-- Here we see another mb-3 class wrapper around my checkbox. Not needed. -->
  <div class="col-auto">
    <div class="mb-3">
      <div id="div_id_detailed" class="mb-3">
        <input type="checkbox" name="detailed" class="checkboxinput form-check-input" id="id_detailed">
        <label for="id_detailed" class="form-check-label">
          Detailed
        </label>
      </div>
    </div>
  </div>
  <!-- Here I also had to manually add the mb-3 to fix the alignment -->
  <div class="mb-3 col-auto">
    <input type="submit" name="submit" value="Display" class="btn btn-primary" id="submit-id-submit">
  </div>
</form>

Did I do something wrong to accomplish this inline form, or does the template need a bit of love to work with Bootstrap5 :)

[smithdc1]

Using the div to build your layout looks right to me. There's then the issue with mb-3. Let's track that at #149