Control text positioning inside a select box (Select2, django-autocomplete-light)

Question

I have a modelform in which i've added a taggitselect2 widget as part of django-autocomplete-light.

This looks up tags from taggablemanager to allow an autocompletion. The autocomplete is working fine - but the alignment of the text inside the select box is off. The text aligns with the bottom of the select box, leaving a big gap between the top of the tag and the top of the select box. Easier with a picture: https://i.sstatic.net/OJUvp.jpg

forms.py

widgets = {
    'tags': autocomplete.TaggitSelect2(
        url='recordings:recording-autocomplete',
        attrs={
            'data-placeholder': 'Start typing to autocomplete...',
        }

 ....inside def __init__
    self.helper.layout = Layout(
        Row(Column(Field('tags')),css_class='form-row'),

I've tried looking at styling options - this is a bootstrap project so ideally i would like the same styling you get with data_role="tagsinput" but if i assign that to the widget i guess it overrides the custom part and i get some broken output.

Answer 1

Couldn't work out why the default rendering is so poorly formatted so as a workaround I've just overridden the css.

On inspection, the selection elements have a 5px margin, enough to align them with the bottom. Hence applying the following in css:

.select2-selection__choice{
    margin-top: 0px !important;
}

'fixes' the problem. Without '!important' it gets overridden to 5px, so this is required.