控制 select 框内的文本定位(Select2、django-autocomplete-light)
Control text positioning inside a select box (Select2, django-autocomplete-light)
我有一个模型表单,其中我添加了一个 taggitselect2 小部件作为 django-autocomplete-light 的一部分。
这会从 taggablemanager 中查找标签以允许自动完成。自动完成工作正常 - 但 select 框中文本的对齐方式已关闭。文本与 select 框的底部对齐,标签的顶部和 select 框的顶部之间留有很大的空隙。有图更简单:
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'),
我试过查看样式选项 - 这是一个 bootstrap 项目,所以理想情况下我想要与 data_role="tagsinput"
相同的样式,但如果我将其分配给小部件,我猜它覆盖自定义部分,我得到一些损坏的输出。
无法弄清楚为什么默认呈现的格式如此糟糕,因此作为解决方法,我刚刚覆盖了 css。
经过检查,选择元素有 5 像素的边距,足以使它们与底部对齐。因此在 css 中应用以下内容:
.select2-selection__choice{
margin-top: 0px !important;
}
'fixes'问题。如果没有 '!important',它会被覆盖为 5px,因此这是必需的。
我有一个模型表单,其中我添加了一个 taggitselect2 小部件作为 django-autocomplete-light 的一部分。
这会从 taggablemanager 中查找标签以允许自动完成。自动完成工作正常 - 但 select 框中文本的对齐方式已关闭。文本与 select 框的底部对齐,标签的顶部和 select 框的顶部之间留有很大的空隙。有图更简单: 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'),
我试过查看样式选项 - 这是一个 bootstrap 项目,所以理想情况下我想要与 data_role="tagsinput"
相同的样式,但如果我将其分配给小部件,我猜它覆盖自定义部分,我得到一些损坏的输出。
无法弄清楚为什么默认呈现的格式如此糟糕,因此作为解决方法,我刚刚覆盖了 css。
经过检查,选择元素有 5 像素的边距,足以使它们与底部对齐。因此在 css 中应用以下内容:
.select2-selection__choice{
margin-top: 0px !important;
}
'fixes'问题。如果没有 '!important',它会被覆盖为 5px,因此这是必需的。