I have followed the crispy forms docs to create a simple inline form using bootstarp4. But it seems the form is not becoming a "inline" but a "horizontal".
Here is the code snippet that I have so far along with the screenshot of the rendered web view,
# models.py
from django.db import models
class InlineTestModel(models.Model):
name = models.CharField(max_length=20)
age = models.IntegerField()
email = models.EmailField()
# form_helper.py
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
class FormHelperBase(FormHelper):
form_inputs = []
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.set_inputs()
def set_inputs(self):
for form_input in self.form_inputs:
self.add_input(form_input)
class TestInlineFormHelper(FormHelperBase):
form_class = 'form-inline'
field_template = 'bootstrap4/layout/inline_field.html'
layout = Layout(
'name', 'age', 'email'
)
form_inputs = [
Submit('Save', 'Save', css_class='button white')
]
# forms.py
from django import forms
class TestInlineForm(forms.ModelForm):
helper = TestInlineFormHelper()
class Meta:
model = InlineTestModel
fields = '__all__'
# views.py
from django.views import generic
from django.urls import reverse
class TestInlineAddView(generic.CreateView):
model = InlineTestModel
form_class = TestInlineForm
template_name = 'app_name/test_inline_add.html'
def get_success_url(self):
return reverse('app_name:success_url')
# template
{% extends 'expenses/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block form_body %}
<form method="post">{% csrf_token %}
{% crispy form %}
</form>
{% endblock %}
Rendered web view
The issue was, we don't need to use <form>
...</form>
tags while using the crispy
tag
{% extends 'expenses/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block form_body %}
<form method="post">{% csrf_token %}
{% crispy form %}
</form>
{% endblock %}
In short, it needs just single line, as
{% extends 'expenses/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% crispy form %}