CODEWITHSUNDEEP
pythondjango-templatesdjango-admindjango-autocomplete-light
Charlesliam
Charlesliam

Reputation: 1313

django autocomplete-light template plus sign

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. enter image description here

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.

Upvotes: 0

Views: 1361

Answers (1)

jpic
jpic

Reputation: 33420

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:

enter image description here

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.

Upvotes: 1

Related Questions