Django Crispy Formsets CSS

Я пытаюсь использовать crispy forms & bootstrap с наборами форм, но не могу разобраться со стилизацией CSS. Мне нужно стилизовать его в бэкенде, поскольку я хочу позволить клиенту динамически добавлять больше одинаковых форм, а когда вы добавляете пустую форму в HTML, она не сохраняет тот же стиль.

create.html

<!--RECIPE INGREDIENTS-->
{% if formset %}
<h3>Ingredients</h3>
{{ formset.management_form|crispy }}

<div id='ingredient-form-list'>
    {% for ingredient in formset %}
        <div class='ingredient-form row'>
    
            {{ ingredient }}

        
        </div>
    {% endfor %}
</div>

forms.py

class RecipeIngredientForm(forms.ModelForm):
class Meta:
    model = RecipeIngredient
    fields = ['name', 'quantity', 'unit', 'description']
    labels = {
        'name': "Ingredient",
        "quantity:": "Ingredient Quantity",
        "unit": "Unit",
        "description:": "Ingredient Description"}
    

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.layout = Layout(
        Row(
            Column('name', css_class='form-group col-md-6 mb-0'),
            Column('quantity', css_class='form-group col-md-4 mb-0'),
            Column('unit', css_class='form-group col-md-4 mb-0'),
            css_class='form-row'
        ),
        Row(
            Column('description', css_class='form-group col-md-6 mb-0'),
            css_class='form-row'
        ),
    )

views.py

def recipe_create_view(request):
    form = RecipeForm(request.POST or None)
    RecipeIngredientFormset = formset_factory(RecipeIngredientForm)
    formset = RecipeIngredientFormset(request.POST or None)
    
    context = {
        "form": form,
        "formset": formset,
    }
    if request.method == "POST":
        #print(request.POST)
        if form.is_valid() and formset.is_valid() and instructionFormset.is_valid():
            parent = form.save(commit=False)
            parent.user = request.user
            parent.save()
            
            #recipe ingredients
            for form in formset:
                child = form.save(commit=False)
                if form.instance.name.strip() == '':
                    pass
                else:
                    child.recipe = parent
                    child.save()
            
    else:
        form = RecipeForm(request.POST or None)
        formset = RecipeIngredientFormset()
        
    return render(request, "recipes/create.html", context)

Вот как это отображается, и есть пустой div, который оборачивает поля ввода формы. и мой FormHelper CSS нигде не виден.

Django Formset

Вам необходимо загрузить теги crispy, а также crispy поле формы в шаблоне.

Когда мы отображаем форму, используя:

{% load crispy_forms_tags %}
{% crispy example_form %}

Или в вашем случае

{{ ingredient|crispy }}

Проблема была связана с тем, как я выводил форму в шаблоне create.html.

Правильный способ его загрузки - использование {% crispy ..... %}, как показано ниже для for loop и пустой формы.

<!--RECIPE INGREDIENTS-->
                {% if formset %}
                    <h3>Ingredients</h3>
                    {{ formset.management_form|crispy }}
                    {% load crispy_forms_tags %}
                    <div id='ingredient-form-list'>
                        {% for ingredient in formset %}
                       
                                <div class='ingredient-form row'>
                                    
                                    {% crispy ingredient %}
                                    
                                </div>
                        {% endfor %}
                    </div>

                    <div id='empty-form' class='hidden'>{% crispy formset.empty_form %}</div>
                    <button class="btn btn-success" id='add-more' type='button'>Add more ingredients</button>
                {% endif %}
Вернуться на верх