Как динамически добавлять формы из наборов форм - PullRequest
Новая
       18

Как динамически добавлять формы из наборов форм

0 голосов
/ 16 июня 2019

У меня есть базовая форма, которая содержит поля, которые должен заполнять пользователь, и кнопка, которая позволяет пользователю добавлять до десяти экземпляров другой формы, относящейся к базовой форме (это просто динамическое добавление форм черезДжанго Формсет).Когда HTML загружается, базовая форма и все содержимое выглядит великолепно, но когда я иду, чтобы добавить форму из набора форм, CSS портится, потому что форма из набора форм не будет соответствовать ни базовой форме CSS, ни любому CSS I 'я добавил к нему.

Я сделал div, который будет содержать все формы, добавленные с помощью кнопки добавления formset, чтобы я мог форматировать все добавленные формы с одним CSS-идентификатором.Однако форматирование, похоже, не работает - добавленные элементы форм расширяют поля базовой формы и кажутся плавающими.

HTML: 

<div class="center-text jumbotron">

  <h2>Incident Report Form</h2>

  <form method="post" class="form-horizontal">
    {% crispy incident_form %}

    <div id="form_set_class">
      {{ incident_formset.management_form }}
      <table>
        {% for form in incident_formset %}
          {{form.non_filed_errors}}
          {{form.errors}}
          {% crispy form %}
        {% endfor %}
      </table>
    </div>

    <input type="button" id="add_def_report" value="Add Report">

    <div id="empty_form" style="display:none">
      {{incident_formset.empty_form}}
    </div>

    <input type="submit" class="btn btn-primary" value="Submit">

  </form>
</div>

CSS: 

.center-text{
  display: block;
  text-align: center;
}

form{
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

legend {
  float: left; /*allows for top margin */
  border-bottom: 1px solid black;
  margin-bottom: 20px;
  margin-top: 20px;
}

#form_set_class{
  clear: both;
  display: block;
  text-align: center;
}

Good Styling (изображение показывает верхнюю часть формы): enter image description here

Messed Up Styling (изображение показывает нижнюю часть формы; добавленный набор форм начинается с выпадающего списка «Поставщик»): enter image description here

...