django-autocomplete-light: single-select autocomplete does not look good using django-bootstrap5 bootstrap_form

Below is a screenshot of a single-select and multi-select form rendered with {% bootstrap_form myform %}, a tag from django-bootstrap5.

Closed:

Open:

Unfortunately, I don’t know a ton about bootstrap5 forms, so I don’t know the exact styling it’s missing, or how to customize it. I’d have to do more research.

For more details of form object, template, etc., see https://stackoverflow.com/questions/75249988/why-is-django-autocomplete-light-single-select-badly-styled-and-broken-when-mult.

About this issue

Original URL
State: open
Created a year ago
Comments: 15

Most upvoted comments

@dfrankow You could use the bootstrap5 theme for select2. https://apalfrey.github.io/select2-bootstrap-5-theme/

include the theme css, f.ex. in your template: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.css" />.
pass the theme to the widget using its attrs like so autocomplete.ModelSelect2(attrs={'data-theme': 'bootstrap-5'})

Actionb on Mar 8, 2023

hey @dfrankow,

thanks for the snippet. this helped me with the same issue. I hope there is an official less hacky solution in the future.

mordechaiyosef on Mar 4, 2023

@Actionb it works! thanks a bunch 😃

mordechaiyosef on Mar 10, 2023

Oh you mean the width of the container? https://select2.org/appearance#container-width

Set it like so: widget=autocomplete.Select2(attrs={"data-theme": "bootstrap-5", "style": "width: 100%;"})

Actionb on Mar 10, 2023

@dfrankow You could use the bootstrap5 theme for select2. https://apalfrey.github.io/select2-bootstrap-5-theme/

include the theme css, f.ex. in your template: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.css" />.

pass the theme to the widget using its attrs like so autocomplete.ModelSelect2(attrs={'data-theme': 'bootstrap-5'})

@Actionb this doesnt seem to fix the issue

mordechaiyosef on Mar 9, 2023

If this helps anyone else, I added the hacks below to my CSS. Not sure if that is a good idea, but here we go.

<style>
.select2-selection--single {
    /* Existing options: */
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    /* HACK: new option to make padding right: */
    padding-bottom: 36px;
}

/* HACK: make default django-autocomplete-light arrow go away (so bootstrap shows): */
.select2-selection__arrow {
    visibility: hidden;
}
</style>

dfrankow on Jan 26, 2023