Using autocomplete in tabular inlines moves everything over one column

[jenniwren]

As you can see in the screen shots, as soon as I begin typing in the autocomplete field, it moves that row of the inline table over to the right by one column. It isn't so bad in this case when I only have one column, but when there are several columns, it makes figuring out data entry rather confusing!

Has anyone else experienced this?

in admin.py:

class FamilylInline(admin.TabularInline):
    form = autocomplete_light.modelform_factory(Family,autocomplete_names={'family':'FamilyAutocomplete'})
    """" etc """"

in autocomplete_light_registry.py

autocomplete_light.register(Family,
    search_fields=['field1','field2','field3'],
    attrs={
        'placeholder': 'Family',
        'data-autocomplete-minimum-characters': 1,
    },
    widget_attrs={
        'data-widget-maximum-values': 4,
        'class': 'modern-style',
    },
)

[jpic]

Couldn't reproduce, tried here and here.

Did you try without modern-style ?

[jenniwren]

Thanks for trying jpic. I'm sorry I neglected to mention I'm using django 1.6 and also have django-admin-tools installed; doubtful that is causing the problem, but could be relevant.

I just tried without modern style and it had the same effect; I also tried taking out the entire widget_attrs on the offchance that might help, but it did not.

Are the trials you linked to something I can log-in to? Perhaps comparing sources might lead to an answer?

On further inspection, it seems related to when the autocomplete-light-clearfix class and style="overflow:visible;" is added to the <tr>.

<tr class="form-row dynamic-family_set row2" id="family_set-3">

Changes to:

<tr class="form-row dynamic-family_set row2 autocomplete-light-clearfix" id="family_set-3" style="overflow: visible;">
::before

[jenniwren]

Ok, so if I comment out content: " "; in autocomplete-light's style.css, this no longer happens.

Can you (jpic) or anyone else enlighten me as to whether making the autocomplete-light-clearfix class apply to divs only would be appropriate? Obviously it's there for a reason. The css code for reference:

/* These lines are important to avoid style change to the underlying divs */
.autocomplete-light-clearfix:before,
.autocomplete-light-clearfix:after {
    content: " "; /* this is what I commented out to fix the issue */
}
.autocomplete-light-clearfix:after {
    clear: both;
}
.autocomplete-light-clearfix {
    *zoom: 1;
}