Skip to content

Activator styles not applied on Python versions less than 3.11 #187

@Amos-Cacha

Description

@Amos-Cacha

Outdated (see second comment), I've also changed the issue title to describe my other issue instead of the one here (see first comment)

Show outdated info Hello, I managed to recreate this issue in the testapp where the text of an activator button is set to None when using a default_renderer. I have only tested the bootstrap renderer so far.

Image

It works properly when you use {% render_form form "bootstrap" %} in the template code instead of {{ form }}.

Image

Steps to recreate:

  1. I added a mytest.py and mytest.html with the following code
    (I wasn't really sure how to edit the views.py)

mytest.py

class TestView(FormView):
    form_class = AddressForm
    template_name = "testapp/mytest.html"
    success_url = "/"

mytest.html

{% extends "bootstrap/base.html" %}
{% load render_form from formsetify %}

{% block main-content %}
<django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">
    {% comment %} Set this to True to test the appropriate behavior {% endcomment %}
    {% if False %}
        {% render_form form "bootstrap" %}
    {% else %}
        {{ form }}
    {% endif %}
</django-formset>
{% endblock %}
  1. Then I modified address.py by adding this code default_renderer = FormRenderer(form_css_classes='row mt-4', ) and I also changed the label of one of the activators just to confirm that my changes were reflected label="Should be able to see this ",
  2. I also modified urls.py by adding
from .mytest import TestView
...
path('mytest', TestView.as_view(), name='address'),
  1. Finally, you can see the error by running the server and going to the "/mytest" URL

In my own code where I first discovered the bug, I also encountered an issue where the button variant style is not applied. When I inspected the rendered html code of the buttons, the class is being set to "btn btn-1" where the number after the dash corresponds to the appropriate button variant. I haven't been able to recreate this in the testapp though, so I am still testing what could be different.

Image

Workaround
If anybody is also encountering this issue, I've been using this JS code as a workaround it's kind of fragile though depending on how you render your form.

const buttons = ["btn-primary", "btn-secondary", "btn-success", "btn-danger", "btn-warning", "btn-info"];
for (let i = 0; i < buttons.length; i++) {
    document.querySelectorAll(".btn-" + (i + 1)).forEach(function(button) {
        button.classList.add(buttons[i]);
        if (button.innerText == "None")
            button.childNodes[0].textContent = document.querySelector(`label[for="${button.id}"`).getAttribute("content");
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions