django autocomplete-light template plus sign

Question

Newbee here. I'm using django-autocomplete-light for my foreign field key in django admin. It's working great. But once I selected an item the plus sign is thrown below the item.

Is there a way for the plus sign to stay in line with the selected item to save space?

EDIT for clarity - I'm using django grappelli.

Thank you django-autocomplete-light author, jpic for explaining how to override the template and css. Good thing I can paste image now.

In the image above I have two autocomplete, Public Telecom Entity (PTE) and Antenna. The customized form is using

class Meta: widgets = autocomplete_light.get_widgets_dict(Equipment) 

PTE is defined in the form as

carrier = forms.ModelChoiceField(Carrier.objects.all(), 
                 label="Public Telecom Entity",    
                 widget=autocomplete_light.ChoiceWidget('CarrierAutocomplete', 
                 attrs='style':'width:520px;',})) 

But I did not defined Antenna. I assume, this field will be using the Meta widget.

Answer 1

Is there a way for the plus sign to stay in line with the selected item to save space?

The plus sign seems OK for me:

While there is no button to push for the plus sign to stay in line with the selected item to save space (which is not even clear to me), you could modify the design of the widget to your likings. That's what I will detail in this answer.

Overriding the widget template

You can override template autocomplete_light/widget.html.

To do so, copy /path/to/autocomplete_light/templates/autocomplete_light/widget.html into the autocomplete_light subdirectory of one of your TEMPLATE_DIRS. For example:

mkdir ~/your_project/templates/autocomplete_light
cp ~/env/lib/python/site-packages/autocomplete_light/templates/autocomplete_light/widget.html ~/your_project/templates/autocomplete_light

Restart your server and you can safely edit ~/your_project/templates/autocomplete_light/widget.html.

Overriding the stylesheet

It's the same for the stylesheet. All you have to do to hack it is to copy it from autocomplete_light/static/autocomplete_light/style.css into one of your STATICFILES_DIRS. If you're still unsure about how django staticfiles work, you might want to read Surviving staticfiles. For example:

mkdir ~/your_project/static/autocomplete_light
cp ~/env/lib/python/site-packages/autocomplete_light/static/autocomplete_light/style.css ~/your_project/static/autocomplete_light

Restart your development server and you can safely modify ~/your_project/static/autocomplete_light/style.css to your likings.

If you think you have a really better way

If you think you have a better idea for the default widget shipped by autocomplete-light v1, feel free to open a pull request on github.