Django Admin: How to customize autocomplete_fields width to adapt to the content?

Question

I'm trying to customize the widget rendered by autocomplete_fields for a ForeignKey Model field. Basically the problem is that the widget is too narrow for the content and it's breaking in two lines inside the select:

I have seen that the JS library or JQuery plugin is called Select2 and it has a "dropdownAutoWidth" to make it adapt to the parent element size that kind of works but I'm completely clueless on how to set that option from admin.py since it seems that options are never passed in the code at django.contrib.admin.widgets.AutocompleteMixin.media:

    def media(self):
    extra = '' if settings.DEBUG else '.min'
    i18n_name = SELECT2_TRANSLATIONS.get(get_language())
    i18n_file = ('admin/js/vendor/select2/i18n/%s.js' % i18n_name,) if i18n_name else ()
    return forms.Media(
        js=(
            'admin/js/vendor/jquery/jquery%s.js' % extra,
            'admin/js/vendor/select2/select2.full%s.js' % extra,
        ) + i18n_file + (
            'admin/js/jquery.init.js',
            'admin/js/autocomplete.js',
        ),
        css={
            'screen': (
                'admin/css/vendor/select2/select2%s.css' % extra,
                'admin/css/autocomplete.css',
            ),
        },
    )

Gracielagracile

Answer 1

Django 3.0.9:

forms.py

from django import forms
from django.contrib import admin
from django.contrib.admin.widgets import AutocompleteSelect

from .models import MyModel

    class MyModelForm(forms.ModelForm):
        class Meta:
            fields = ('my_field', )
            widgets = {
                'my_field': AutocompleteSelect(
                    MyModel.my_field.field.remote_field,
                    admin.site,
                    attrs={'style': 'width: 400px'}  # You can put any width you want.
                ),
            }

admin.py

from django.contrib import admin

from .forms import MyModelForm


MyModelAdmin(admin.ModelAdmin):
    form = MyModelForm

Myles

For models.ManyToManyField the widget to use is AutocompleteSelectMultiple instead of AutocompleteSelect. You have to import it too – Nonu

UPDATE: Django 3.2 forget about the "remote_field" part. – Myles

Answer 2

You can pass data-* attributes to select2 by including them in the autocomplete widget's attrs. One way to do this is to initialize the widget yourself using a custom form.

Note that if you also include the field in autocomplete_fields then the widget will be initialized by your ModelAdmin instance and your custom initialization won't have any effect.

Also note that the AutocompleteSelect and AutocompleteSelectMultiple widgets require a couple of positional arguments.

Something like this should work:

from django import forms
from django.contrib import admin
from django.contrib.admin.widgets import AutocompleteSelect

class MyForm(forms.ModelForm):
    class Meta:
        widgets = {
            'my_field': AutocompleteSelect(
                MyModel._meta.get_field('my_field').remote_field,
                admin.site,
                attrs={'data-dropdown-auto-width': 'true'}
            ),
        }

class MyAdmin(admin.ModelAdmin):
    #autocomplete_fields = ['my_field']
    form = MyForm

Chiccory

Thanks for your answer I'll give it a go but I don't think you can pass all attributes as data-* attributes. – Gracielagracile

Most data-* attributes should work if passed in this manner. The attributes that won't work are the ones that are hardcoded into the AutocompleteMixin. You'd probably have to extend the widget to modify those. Check out the source code. I've tested this with data-dropdown-auto-width in Django 2.2 and it works. – Chiccory

note that the auto-width only applies to the dropdown. If you want to style the width of the select element, add 'data-width' to the attrs. – Predestinarian