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)?

4 replies

jrief Jan 17, 2025
Maintainer

Did you npm run compilescss? This command creates the files formset/static/formset/css/bootstrap5-extra.css and formset/static/formset/css/collections.css.

This is a similar example to yours: https://django-formset.fly.dev/bootstrap/company
There the buttons are properly aligned.

Your Chrome browser seems to be quite old. The current version is 131. I would suggest to upgrade.

kashyl Jan 20, 2025
Author

I apologise for the confusion - I'm encountering this issue on the distribution version: django-formset==1.5.5, as well as 1.6.
It seems to me that on the testapp, the additional styling rules (for example, the border-bottom: 1px dashed rgb(206, 212, 218); are hardcoded in testapp/static/testapp/css/bootstrap.css, but not found in the distribution's formset\static\formset\collections.css

I believe this could be fixed if the .css rules from the testapp bootstrap.css are moved to django-formset/assets/scss /collections.scss

Also, thanks for the notice, I've updated my browser.

jrief Jan 20, 2025
Maintainer

Please check that static/formset/css/bootstrap5-extra.css is imported into your styles. The testapp does this through an @import in bootstrap.css. These extra styles are required in Bootstrap to fix your described problems.

kashyl Jan 21, 2025
Author

Hi, I've double-checked by adding in some test rules (e.g., background colour red to body) and both bootstrap5-extra.css and collections.css seem to be imported.

However, looking through both the bootstrap and collections .css and .scss files, I couldn't find the missing styling rules in any of them.

For example:

django-form-collection[sibling-position]:not(:last-of-type) {
	border-bottom: 1px dashed light-dark(var(--bs-gray-400), var(--bs-gray-700));
}

If I inspect the example at https://django-formset.fly.dev/bootstrap/contactlist,
I can see that the remove button has its styling from testapp\css\bootstrap.css:

Which contains:

@import url("/static/node_modules/bootstrap/dist/css/bootstrap.min.a549af2a81cd.css");
@import url("/static/node_modules/bootstrap-icons/font/bootstrap-icons.4687b01d2564.css");
@import url("/static/formset/css/collections.80327ca27fa0.css");
@import url("/static/formset/css/bootstrap5-extra.572601ec8847.css");

.container {
	margin-bottom: 250px;
}

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 light-dark(var(--bs-gray-400), var(--bs-gray-700));
}
django-form-collection[sibling-position] > .remove-collection {
	top: 0.25rem;
}
django-form-collection[sibling-position] > .collection-drag-handle ~ .remove-collection {
	top: 0.375rem;
}
.collection-siblings {
	border-bottom: 1px solid light-dark(var(--bs-gray-400), var(--bs-gray-700));
	margin-bottom: -9px;
}
.add-collection {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

#id_some_date ~ .dj-calendar .monthdays > li {
	display: flex;
	flex-direction: column;
}
#id_some_date ~ .dj-calendar .monthdays > li > sub {
	height: 1em;
	bottom: 0;
}

I can see the imports, but what I don't understand is why does it add some rules on top of that instead of importing them all from /static/formset/css/collections[...].css? Since they both work with django-form-collection tags.

My distribution version is unaltered, and I've followed the exact steps of replicating the contact form (I started with a simple example on a clean view, also I have no custom CSS in my project besides importing bootstrap5), but I am missing these exact rules which aren't provided from the import. As a note, if I manually add them into collections.css, then everything works.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FormCollection styling issue with Bootstrap renderer #184

{{title}}

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{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 · 6 replies

kashyl Jan 9, 2025 Author

jrief Jan 9, 2025 Maintainer

kashyl Jan 9, 2025 Author

kashyl Jan 9, 2025 Author

jrief Jan 17, 2025 Maintainer

kashyl Jan 20, 2025 Author

jrief Jan 20, 2025 Maintainer

kashyl Jan 21, 2025 Author

kashyl
Jan 9, 2025

Replies: 2 comments 6 replies

kashyl
Jan 9, 2025
Author

jrief Jan 9, 2025
Maintainer

kashyl Jan 9, 2025
Author

kashyl
Jan 9, 2025
Author

jrief Jan 17, 2025
Maintainer

kashyl Jan 20, 2025
Author

jrief Jan 20, 2025
Maintainer

kashyl Jan 21, 2025
Author