Django admin sortable change-list (grappelli) header displacement

Question

I installed grappelli and the sortable app from ff0000-django-sortable on github and everything works perfectly but one detail you can see in the picture in this link

The header of the table is displaced to the right. This only happens when the sorting is enabled. If I sort any other field (clicking on other column header) the header looks ok. I also realize the problem is on the javascript function "$(table).find('tbody').sortable()" in "django-admin-sortable.js"

I guess this is easy to fix but I can´t find where or how. Can anyone point me to the right direction?

Answer 1

This problem is caused by a 'float' on the ui-sortable class by JQuery UI, which causes all the cells to float left.This can easily be fixed adding a css file to your admin class.

class SortableAdminMixin(object):

    # Make instances reorderable
    list_editable = ('position',)
    list_display = ('position', )

    class Media:
        js = (
            'admin/js/django-admin-sortable.js',
        )

        css = {
            'all': ('admin/css/admin-sortable-fix.css',)
        }

The 'admin-sortable-fix.css' file should contain the following line:

tbody.ui-sortable {float:none;}