Select2更改容器位置 [英] Select2 change container position
问题描述
如何调整Select2容器的位置,以使搜索框位于该网站上原始选择元素的正上方
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
我认为UI看起来更干净.
It look cleaner in terms of UI in my opinion.
Ps.抱歉,我现在无法发布图片.
Ps. sorry, I can't post the image now.
推荐答案
有两种方法可以做到这一点.
There is 2 ways to do this.
1)使用CSS:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
这不会影响容器(.select2-container),但会移动下拉列表和搜索字段,因此您将获得理想的效果.
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2)使用js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
此代码将处理程序附加到"select2:open"事件,该事件将在每次用户打开下拉菜单时触发.如果页面上有多个选择,则此方法更好.
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
通过select2 4.0.0测试
Tested with select2 4.0.0
这篇关于Select2更改容器位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!