控制选择框内的文本定位（Select2，django-autocomplete-light）答案

【问题标题】：Control text positioning inside a select box (Select2, django-autocomplete-light)控制选择框内的文本定位（Select2，django-autocomplete-light）
【发布时间】：2020-01-26 20:51:12
【问题描述】：

我有一个模型表单，我在其中添加了一个 taggitselect2 小部件作为 django-autocomplete-light 的一部分。

这会从 taggablemanager 中查找标签以允许自动完成。自动完成工作正常 - 但选择框中的文本对齐已关闭。文本与选择框底部对齐，在标签顶部和选择框顶部之间留有很大间隙。有图更简单： https://imgur.com/a/WxFMLfF

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'),

我已经尝试查看样式选项 - 这是一个引导项目，所以理想情况下我希望与 data_role="tagsinput" 获得的样式相同，但如果我将其分配给小部件，我猜它会覆盖自定义部分，我会得到一些损坏的输出。

【问题讨论】：

标签： django jquery-select2 django-autocomplete-light

【解决方案1】：

无法弄清楚为什么默认渲染的格式如此糟糕，因此作为一种解决方法，我刚刚覆盖了 css。

检查时，选择元素有 5px 的边距，足以使它们与底部对齐。因此在 css 中应用以下内容：

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

“修复”问题。如果没有 '!important'，它会被覆盖为 5px，所以这是必需的。

【讨论】：