FormCollection styling issue with Bootstrap renderer #184

kashyl · 2025-01-09T02:00:59Z

kashyl
Jan 9, 2025

Hi all! The form collection feature is exactly what I need, and I've started implementing it for my project by firstly trying to get the basic ContactCollection CollectionForm from the documentation working:

# forms.py

from formset.renderers.bootstrap import FormRenderer
from formset.utils import FormMixin
from formset.collection import FormCollection

class PersonForm(forms.Form):
    full_name = forms.fields.CharField(
        label="Full name",
        min_length=3,
        max_length=50,
    )

class PhoneNumberForm(forms.Form):
    phone_number = forms.fields.RegexField(
        r'^[01+][ 0-9.\-]+$',
        label="Phone Number",
        min_length=2,
        max_length=20,
        help_text="Valid phone numbers start with + or 0 followed by digits and spaces",
    )

class PhoneNumberCollection(FormCollection):
    legend = "List of Phone Numbers"
    add_label = "Add new Phone Number"
    min_siblings = 1
    max_siblings = 5
    extra_siblings = 1
    is_sortable = True

    number = PhoneNumberForm()

class ContactCollection(FormCollection):
    default_renderer = FormRenderer(field_css_classes='mb-3')
    legend = "Contact"
    person = PersonForm()
    numbers = PhoneNumberCollection()

# views.py
from formset.views import FormCollectionView
from .forms import ContactCollection
class AddressBookView(FormCollectionView):
    collection_class = ContactCollection
    template_name = "jobs/form-collection.html"
    success_url = "/success"

The result is:

As you can see, the delete button is not aligned well, and the dotted-line separators between each phone number are missing.

These are my JavaScript and Stylesheet imports:

    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/>

        <title>{% block title %}{% endblock title%}</title>

        <script type="text/javascript" src="{% static 'node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>
        <link href="{% static 'node_modules/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
        
        <script src="{% url 'javascript-catalog' %}"></script>

        <script type="module" src="{% static 'formset/js/django-formset.js' %}"></script>
        <link href="{% static 'formset/css/collections.css' %}" rel="stylesheet">
        <link href="{% static 'formset/css/bootstrap5-extra.css' %}" rel="stylesheet">
    </head>

I've been trying to figure this out for a good while now, and would really appreciate any hints on what the issue may be.

kashyl · 2025-01-09T02:08:52Z

kashyl
Jan 9, 2025
Author

One thing I've noticed is that, in Chrome (at least), the scss content of collections.scss and bootstrap5-extra.scss is not loaded: Could not load content for http://127.0.0.1:8000/assets/scss/collections.scss (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

I'm not sure if this is relevant; importing the collections.css seems to have an impact on the form (though I can't notice anything different with bootstrap5-extra.css on/off).

2 replies

jrief Jan 9, 2025
Maintainer

If you use the development version, you have to compile them separately. They should be part of the distribution.
I will check. Which browser are you using, incl. version?

kashyl Jan 9, 2025
Author

This was on Chrome, Version 121.0.6167.140, though I'm experiencing the same on Edge, Version 131.0.2903.112 as well

kashyl · 2025-01-09T09:43:27Z

kashyl
Jan 9, 2025
Author

Upon inspecting the form at 11.4. Sortable Collections with Siblings, it seems there is some CSS which I couldn't find in my installed django-formset version:

django-form-collection[sibling-position] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

django-form-collection[sibling-position]:not(:last-of-type) {
    border-bottom: 1px dashed rgb(206, 212, 218);
}

django-form-collection[sibling-position] > .remove-collection {
    top: 0.25rem;
}

django-form-collection[sibling-position] > .collection-drag-handle ~ .remove-collection {
    top: 0.375rem;
}

If I manually add these CSS rules to either collections.css or bootstrap5-extra.css (or my style.css) the form is displayed correctly.
Could it be that I am missing (some of) the rules that can be found in testapp/static/testapp/css/bootstrap.css? It seems to import bootstrap, collections, and bootstrap5-extra, and then adds some rules on top of that.
I may be wrong, but maybe those rules should be added into collections.css (namely the scss in dev which should compile, right)?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FormCollection styling issue with Bootstrap renderer #184

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

FormCollection styling issue with Bootstrap renderer #184

kashyl Jan 9, 2025

Replies: 2 comments · 2 replies

kashyl Jan 9, 2025 Author

jrief Jan 9, 2025 Maintainer

kashyl Jan 9, 2025 Author

kashyl Jan 9, 2025 Author

kashyl
Jan 9, 2025

Replies: 2 comments 2 replies

kashyl
Jan 9, 2025
Author

jrief Jan 9, 2025
Maintainer

kashyl Jan 9, 2025
Author

kashyl
Jan 9, 2025
Author