0
857
ViewsDjango Admin: How to customize autocomplete_fields width to adapt to the content?
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',
),
},
)
2 answers
Answer question0
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
0
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