zostera/django-bootstrap5

Bootstrap 5 for Django

django-bootstrap5's Issues

Permagutter on right side of page on typical wide monitor

As you can see the width of that container is 100%.

I even tried putting w-100 in the class field of the container divs.

I'm liking boostrap5 so far. :)

Make decision about buttons-endbuttons tag

The template tag buttons...endbuttons does not do anything that you couldn't do manually. We should either make it useful or drop it.

Stop using mark_safe

There is too much mark_safe and not enough format_html in the code.

Integrate with Django forms and fields

Allow form and field definition to affect bootstrap_form and bootstrap_field parameters.

forms.ImageField adding `<br>` between the label and input fields.

Tested using Django 2.2 on Windows and Ubuntu 20.04

Using regular Django fields works just fine, but a bootstrap_field like {% bootstrap_field form.image_upload show_label=False %} introduces a <br> tag between the label and the input fields. It seems to happen both with the FileInput / ClearableFileInput widgets as far as I can tell.

Document migration from django-bootstrap4 to django-bootstrap5

Fix floating labels

Make sure we know which input types support floating labels. Currently we check for not matching an input type, which will give problems with range, date, time, et cetera.

Add support for inline checkboxes

Currently it is not possible to render checkboxes inline as in Bootstrap documentation: https://getbootstrap.com/docs/5.1/forms/checks-radios/#inline

I would need this option in the bootstrap_field template tag.

Rendering form with exclude is broken

Example:

{% bootstrap_form form exclude="ignore_field" %}

field renderer returns empty (unsafe) string when encountering the ignored field. When concatenated with safe text, the resulting string becomes unsafe and renders escaped html string into template instead rendering the form.

Support toggle buttons

Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/#toggle-buttons

Remove buttons tag

The buttons tag was introduced to align automatically generated buttons with the fields in the form.

In Bootstrap 5, this magic is no longer necessary. Also, the output of the tag was hard to predict. It's better to let users style their own buttons, with the option to use the bootstrap_button tag.

Render file inputs

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#file-input

Note that we also have clearable file inputs.

Drop support for Django 3.0

Extended support for Django 3.0 stopped on April 1, 2021.

Add support for auto sizing

See: https://getbootstrap.com/docs/5.0/forms/layout/#auto-sizing

Implement inline forms

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#inline-forms

Floating labels are not a layout

Floating labels do not affect the layout of the entire form, just how certain input types are rendered. We should not use the layout setting for this.

Improve checks and radios, add tests

Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/

Add default layout parameter

Hi. Sometimes it's important to change the global form/field layout to 'horizontal' or 'floating'
Here is pull request that implements it.

RadioSelectButtonGroup doesn't render

Our custom widget doesn't render because the template_name is overwritten in renderers.py.

Injection in render_tag

render_tag should not try to form attributes:

> render_tag('div', {'class': '{tag}'})
expected: <div class="{tag}"></div>
actual: <div class="div"></div>

> render_tag('div', {'class': '{foo}'})
expected: <div class="{foo}"></div>
actual: KeyError

bootstrap_messages templatetag does not render safe strings correctly

Message containing hyperlinks is rendered with html being escaped.

Switch to CalVer

With regular updates, dependancies on Bootstrap versions and issues whether or not something is a breaking change, CalVer is a better fit for versioning. For example, YY.0M.MICRO.

Support floating form labels

Reference: https://getbootstrap.com/docs/5.0/forms/floating-labels/

Support HTML attributes in `bootstrap_button`

See also zostera/django-bootstrap4#177

A call to bootstrap_button should allow HTML attributes.

form layout='inline' does not render inline

{% bootstrap_form form layout='inline' show_label=False %}
It looks like inline is not being evaluated correctly.

using layout='horizontal' has the expected render

CheckboxInput does not display "this field is required" error

Update this method to fix it.

    def get_checkbox_classes(self):
        """Return CSS classes for checkbox."""
        classes = ["form-check"]
        if self.checkbox_style == "switch":
            classes.append("form-switch")
        if self.checkbox_layout == "inline":
            classes.append("form-check-inline")
        if self.field_errors:
            classes.append(self.error_css_class)
        elif self.field.form.is_bound:
            classes.append(self.success_css_class)
        return merge_css_classes(*classes)

if it was me, I would add a method like this to make getting valid/invalid easier:

    def get_valid(self):
        if self.field_errors:
            return self.error_css_class
        elif self.field.form.is_bound:
            return self.success_css_class
        return None # or return '' for concatenation

Please support form-outline layout variant

I'm using Material Design Bootstrap (MDB) and there is very stylish form field layout variant in use.
If you would allow layout='outline' and the use the 'form-outline' class instead of 'form-floating' it would work fine.

The problem is, that the label has to be rendered after the input widget (like as in floating layout). So there is no easy workaround for this.

Support range control

Reference: https://getbootstrap.com/docs/5.0/forms/range/

Update documentation for templatetags

Documentation is outdated, check parameters for bootstrap_field, bootstrap_form and bootstrap_formset.

Update PyPI classifiers

Update docstrings

Check docstrings, especially public functions, methods and classes.

Add support for textarea

addon_after_class is ignored

The document says addon_after_class will work, but there is no handling logics at all.

Note. Here is how django-bootstrap4 are handling it.
https://github.com/zostera/django-bootstrap4/blob/adc99067b2459d1dafac9904db6f8748acaefe85/src/bootstrap4/renderers.py#L388

Render color picker

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#color

Use readonly and readonly plain text

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#readonly

Release to PyPI

Add support for addons

See: https://getbootstrap.com/docs/5.0/forms/input-group/

wrapper_class does not override mb-3

In django-bootstrap4, bootstrap_field field form_group_class='foo' will use a form group class of foo.

In django-bootstrap5, bootstrap_field field wrapper_class='foo' will use a wrapper class of foo mb-3.

This breaks cases where you need to remove the default margin.

A possible workaround is to use layout='inline', but that adds unrelated styling which might cause other issues.

Add support for checkbox switches

See: https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches

How to extend django_bootstrap5 default templates

As a user of Conda environments on Windows 10,

I want to extend C:\Users\Test\Programming\anaconda3\envs\Django\lib\site-packages\django_bootstrap5\src\django_bootstrap5\templates\django_bootstrap5\bootstrap5.html

by a template inside some app of my Django project; eg C:\Users\Test\Programming\team\project\app\templates\app\base.html.

How can I do it?

Exception Type: NoReverseMatch
Exception Value: Reverse for 'home' not found. 'home' is not a valid view function or pattern name.
Exception Location: C:\Users\Test\Programming\anaconda3\envs\Django\lib\site-packages\django\urls\resolvers.py, line 694, in _reverse_with_prefix
Error during template rendering
In template C:\Users\Test\Programming\anaconda3\envs\Django\lib\site-packages\django_bootstrap5\templates\django_bootstrap5\bootstrap5.html, error at line 11

CheckboxMultipleInput does not render form-invalid

<input class="form-check-input #ADD ERROR HERE"

on each form-check-input the error should be displayed

I'll update this if I figure out where this code gets generated.

It's super hack-y but this works added to the end of renderers.py

html = format_html(
            '<{tag} class="{wrapper_classes}">{label}{field_with_help_and_errors}</{tag}>',
            tag=WRAPPER_TAG,
            wrapper_classes=self.get_wrapper_classes(),
            label=label,
            field_with_help_and_errors=field_with_help_and_errors,
        )
        if isinstance(self.widget,CheckboxSelectMultiple):
            addition = None
            if self.field_errors:
                addition = self.error_css_class
            elif self.field.form.is_bound:
                addition = self.success_css_class
            if addition:
                html = html.replace('<input class="form-check-input','<input class="form-check-input {addition}'.format(addition=addition))
                html = format_html(html)
        return html

Support for Material Design Bootstrap (MDB)

I just started using django_bootstrap5 in my projects where I'm using Material Design Bootstrap (MDB).
Unfortunately they use a different 'prefix' for (at least the event names). For example they use 'data-mdb-dismiss' instead of the 'data-bs-dismiss'. This has the effect, that for example the closing button on alerts does not work.

As the rendering of alerts is done in a function and not with a template, I have no chance to change it.
I don't know what the best solution for this problem is. But one could be to make this prefix ('mdb' or 'bs' or ..) configurable.

For sure there are be more places in the source code where MDB will have effects.

Add Django 3.2

Django 3.2 was released on April 6, 2021.
See: https://docs.djangoproject.com/en/3.2/releases/3.2/

Upgrade Bootstrap to 5.0.1

https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Render datalists

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#datalists

Implement horizontal forms

self.field_errors is not evaluated correctly in CheckboxInput

self.field_errors is always none for CheckboxInput even when the field is required

Use standard Exceptions

The BootstrapException classes have nu added value or function. Standard classes offer more clarity.

module 'django_bootstrap5.renderers' has no attribute 'InlineFieldRenderer'

Upon running the example server, and navigating to "form_inline" I got this error page:

module 'django_bootstrap5.renderers' has no attribute 'InlineFieldRenderer'

Request Method:	GET
Request URL:	http://127.0.0.1:8000/form_inline
Django Version:	3.1.7
Exception Type:	AttributeError
Exception Value:	module 'django_bootstrap5.renderers' has no attribute 'InlineFieldRenderer'
Exception Location:	/Users/username/.pyenv/versions/3.9.1/lib/python3.9/site-packages/django_bootstrap5/core.py, line 72, in get_renderer
Python Executable:	/Users/username/.pyenv/versions/3.9.1/bin/python
Python Version:	3.9.1
Python Path:	['/Users/username/django-bootstrap5/django_bootstrap5', '/Users/jdhemsath1/django-bootstrap5/example', '/Users/username/.pyenv/versions/3.9.1/lib/python39.zip', '/Users/jdhemsath1/.pyenv/versions/3.9.1/lib/python3.9', '/Users/username/.pyenv/versions/3.9.1/lib/python3.9/lib-dynload', '/Users/username/.pyenv/versions/3.9.1/lib/python3.9/site-packages']
Server time:	Wed, 24 Mar 2021 00:53:53 +0100

I tried adding and deleting 'field_renderers': { 'default': 'django_bootstrap5.renderers.FieldRenderer', 'inline': 'django_bootstrap5.renderers.InlineFieldRenderer', }, to the settings.py file in the Example folder, with no change.

Looking at the source renderers.py it looks like there is no class for InlineFieldRenderer.

Fix pagination

See https://getbootstrap.com/docs/5.0/components/pagination/