django-bootstrap5 icon indicating copy to clipboard operation
django-bootstrap5 copied to clipboard

form layout='inline' does not render inline

Open XeonZenn opened this issue 3 years ago • 5 comments

{% bootstrap_form form layout='inline' show_label=False %} It looks like inline is not being evaluated correctly.

using layout='horizontal' has the expected render

XeonZenn avatar May 06 '21 17:05 XeonZenn

Can you elaborate with code, screenshot and perhaps a failing test? The example app shows an inline form that works.

dyve avatar May 14 '21 09:05 dyve

I am also experiencing this. Inline currently renders with all the form contents wrapped in a <div class="col-12"> if the inline_wrapper_class setting is empty/None.

Ideally it should not wrap in any div at all in this case. For example, I'm trying to follow the Bootstrap 5 docs for adding a form to the navbar: https://getbootstrap.com/docs/5.2/components/navbar/#supported-content

<form class="d-flex ms-auto" role="search" action="" method="GET">
  {% load django_bootstrap5 %}
  {% bootstrap_form form layout="inline" %}
  <button class="btn btn-outline-primary ms-2" type="submit">Search</button>
</form>

But instead of outputting the fields directly in the <form> element, it is adding a <div class="col-12"> element, which breaks the desired behavior of d-flex.

<form class="d-flex ms-auto" role="search" action="" method="GET">
  <div class="col-12">
    <label class="visually-hidden" for="id_s">Search</label>
    <input type="text" name="s" maxlength="255" class="form-control is-valid" placeholder="Search" id="id_s">
  </div>
  <input type="hidden" name="t" id="id_t">
  <button class="btn btn-outline-primary ms-2" type="submit">Search</button>
</form>

I believe the "correct" behavior for inline should be to simply output all of the fields without any kind of wrapper divs.

vsalvino avatar Aug 04 '22 18:08 vsalvino