Styling Demos

Example Overview

This example renders responsive, dynamic <select> fields with django_tomselect across Default, Bootstrap 4, and Bootstrap 5 styling, covering both single and multiple selection. It is the place to see how a single css_framework setting adapts the same autocomplete, placeholder, tabular dropdown header, and create/manage features to your project’s chosen CSS framework.

Visual Examples

---

Key Code Segments

Forms

The DefaultStylingForm, Bootstrap4StylingForm, and Bootstrap5StylingForm in forms/basic_demos.py configures fields using TomSelectConfig for the preferred styling.

Bootstrap 4 Styling

class Bootstrap4StylingForm(forms.Form):
    tomselect = TomSelectModelChoiceField(
        config=TomSelectConfig(
            url="autocomplete-edition",
            show_list=True,
            show_create=True,
            show_update=True,
            value_field="id",
            label_field="name",
            css_framework="bootstrap4",  # <<-- Bootstrap 4 styling
            highlight=True,
            open_on_focus=True,
            preload="focus",
            placeholder="Select a value",
            minimum_query_length=2,
            plugin_dropdown_input=PluginDropdownInput(),
            plugin_clear_button=PluginClearButton(title="Clear Selection", class_name="clear-button"),
        ),
        attrs={
            "class": "form-control mb-3",
            "id": "tomselect-custom-id",
        },
        label="Tomselect Single",
        help_text=(
            "TomSelectModelChoiceField with single select, placeholder text, checkboxes, dropdown "
            "input, dropdown footer, remove, clear, edit, and highlighting"
        ),
    )
    # Other fields omitted for brevity

• Purpose: This sets up a dropdown with an autocomplete endpoint (url), styling with preferred style, and a clear button plugin.

---

Template

The default.html, bs4.html, and bs5.html templates render the form using the specified styling. They extend the base layout and include the necessary CSS and JavaScript assets.

Template

{% extends 'example/base_with_bootstrap4.html' %}

{% block extra_header %}
    {{ form.media }}
    <style>
        .helptext {
            font-size: 10px;
            color: #757575;
        }

        /* Override the default form label color to white */
        .form-label {
            color: #FFF;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h2>Bootstrap 4 Styling Demo</h2>
        </div>
        <div class="card-body">
            <div class="pb-5">This page demonstrates four different configurations for the django_tomselect form fields using Bootstrap 4 styling.</div>
            <form>
                {% csrf_token %}
                {{ form.as_div }}
            </form>
        </div>
    </div>
{% endblock %}

---

Autocomplete View

The autocomplete functionality is defined in the autocompletes.py file using AutocompleteModelView.

• Here, we use skip_authorization to bypass the default authorization checks for demonstration purposes.

• Any searches will use the name field of the Edition model.

• The page_size parameter sets the number of results to return per page.

• The value_fields parameter specifies the fields to return in the response.

• The list_url, create_url, update_url, and delete_url parameters are the url names for the respective views, if available.

Autocomplete View

class EditionAutocompleteView(AutocompleteModelView):
    """Autocomplete that returns all Edition objects."""

    model = Edition
    search_lookups = ["name__icontains"]
    page_size = 20
    value_fields = ["id", "name", "year", "pages", "pub_num"]

    list_url = "edition-list"
    create_url = "edition-create"
    update_url = "edition-update"
    delete_url = "edition-delete"

    skip_authorization = True

• Purpose: Provides the backend logic for fetching autocomplete results, with filtering and ordering.

---

Views

We use standard Django views to render the form.

View for Bootstrap 4 Demo

def bootstrap4_demo(request: HttpRequest) -> HttpResponse:
    """View for the Bootstrap 4 demo page."""
    template = "example/basic_demos/bs4.html"
    context = {}

    context["form"] = Bootstrap4StylingForm()
    return TemplateResponse(request, template, context)

---

Design and Implementation Notes

Key Features

• Dynamic styling: Uses the preferred styling.

• Plugins: Includes plugins like clear_button and dropdown_footer to enhance UX.

Alternative Approaches

• Use the “default” styling if Bootstrap is not integrated into the project.

• Use additional plugins like dropdown_footer to add create and list buttons directly in the dropdown.