Невидимые поля формы в шаблоне Django

Question

Пытаюсь вывести разные формы на вкладках одной страницы, используя Tabs из Bootstrap5. Первая форма на первой активной вкладке отображается и работает, но вторая форма на соседней вкладке остаётся невидимой, хотя её присутствие на странице очевидно.

Обе формы передаются и обрабатываются в одном контроллере:

def add(request):
    template = 'base.html'
    page_title = 'Добавить информацию'
    contact_form = CompanyForm(request.POST or None,
                               files=request.FILES or None, )
    if contact_form.is_valid():
        contact = contact_form.save(commit=False)
        contact.save()
        return redirect('spare_parts:main')
    company_form = CompanyForm(request.POST or None,
                               files=request.FILES or None,)
    if company_form.is_valid():
        company = company_form.save(commit=False)
        company.save()
        return redirect('spare_parts:main')
    context = {
        'page_title': page_title,
        'company_form': company_form,
        'contact_form': contact_form,
    }
return render(request, template, context)

Код шаблона:

<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-company-tab" data-bs-toggle="tab"
          data-bs-target="#nav-company" type="button" role="tab"
          aria-controls="nav-company" aria-selected="true"
  >компания</button>
  <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab"
          data-bs-target="#nav-contact" type="button" role="tab"
          aria-controls="nav-contact" aria-selected="false"
  >контакт</button>
</div>
{% with request.resolver_match.view_name as view_name %}
<div class="tab-content">
  <div class="tab-pane fade show active" id="nav-company">
    {% if view_name == 'spare_parts:main' %}
      {% include 'get/get_companies.html' %}
    {% elif view_name == 'spare_parts:add' %}
      {% include 'forms/add_company.html' %}
    {% endif %}
  </div>
  <div class="tab-pane fade" id="nav-contact">
    {% if view_name == 'spare_parts:main' %}
      {% include 'get/get_contacts.html' %}
    {% elif view_name == 'spare_parts:add' %}
      {% include 'forms/add_contact.html' %}
    {% endif %}
  </div>
</div>
{% endwith %}

Хотелось бы понять что я делаю не так? Либо мой подход к реализации нужно менять, либо какая-то ошибка в рендере страницы?

upd_0:

upd_1: код шаблона добавления контакта, код добавления компании отличается только названием переменной в шаблоне: company_form

{% load user_filters %}
<div class="tab-pane fade" id="nav-profile" role="tabpanel"
     aria-labelledby="nav-profile-tab">
  <form method="post">
    {% csrf_token %}
    {% for field in contact_form %}
      <div class="form-group col-md-5">
        <label>
          {{ field.label }}
        </label>
        {{ field|addclass:'form-control' }}
      </div>
    {% endfor %}
    <div class="d-flex justify-content-start p-2">
      <button type="submit" class="btn btn-primary">
          Сохранить
      </button>
    </div>
  </form>
</div>

Answer 1

Как я и подозревал, проблема в подключаемом шаблоне. лишние дивы с бутстраповыми классами, скрывающими их. Уберите в подключаемых шаблонах внешние div и все наладится. Демонстрация вашей пробоемы

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-company-tab" data-bs-toggle="tab" data-bs-target="#nav-company" type="button" role="tab" aria-controls="nav-company" aria-selected="true">компания</button>
  <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">контакт</button>
</div>
<div class="tab-content">
  <div class="tab-pane fade show active" id="nav-company">
       Этот таб вы увидите
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-profile-tab">
    <div class="tab-pane fade" id="nav-contact-child">
      А этот останется скрытым
    </div>
  </div>
  
</div>
<input type="button" value="хочу видеть второй таб" onclick="document.getElementById('nav-contact-child').className='';">

</body>
</html>

БЛОГ НА HUSL

Невидимые поля формы в шаблоне Django

Ответы (1 шт):