form layout='inline' does not render inline

[XeonZenn]

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

using layout='horizontal' has the expected render

[dyve]

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

[vsalvino]

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.

[amyasnikov]

+1 to this issue. Also experiencing the appearance of this strange <div class="col-12"> wrapper which totally breaks inline form

[dyve]

Thank you for the examples of the resulting code. Can you add the exact code that gives you the wrong result, and please compare to the example app and the tests?

[amyasnikov]

After digging inside the source code I've found out that this annoying "col-12" field wrapper may be overridden using inline_field_class tag parameter.
Like this:

{% bootstrap_form my_form layout="inline" inline_field_class="col-auto" %}

This solves the problem with inline layout.