选择二变容器位置

如何调整选择二容器的位置，使得搜索框就在原来的选择元素位置想在这个网站选择二变容器位置

http://www.jobnisit.com/en

它在UI方面看上去更清洁我的想法。

Ps。抱歉，我现在无法发布图片。

2015-07-22 sarantoo

这个问题太宽泛;你能否在你的问题中添加细节和代码以帮助澄清？ – TylerH

@TylerH我没有特定的代码，但通常默认的Select2（单个选择是特定的），点击时，会出现一个搜索框出现在选定的列表下方。我的问题是有没有办法将搜索框放在选定列表的正上方。我见过提到的网站（http://www.jobnisit.com/en）这样做，但我无法弄清楚他们是如何做到的。 – sarantoo

有2种方法可以做到这一点。

1）用CSS：

.select2-dropdown--below { 
    top: -2.8rem; /*your input height*/ 
}

这不会影响容器（.select2容器），但将移动下拉菜单和搜索栏，这样你才会有预期的效果。

2）随着JS：

$('select').select2().on('select2:open', function() { 
    var container = .$('.select2-container').last(); 
    /*Add some css-class to container or reposition it*/ 
});

该代码将一个处理程序“选择2：打开”事件，这将是每次当用户打开一个下拉时间发射。如果您在页面上有多个选择，则此方法更好。

测试与SELECT2 4.0.0

来源

2015-08-12 15:10:05

谢谢@Gennady，CSS解决方案适用于我。在此之前，我将负顶部设置为.select2下拉菜单。似乎具有相同的效果。按照建议玩js解决方案。 – sarantoo

当文本框位于上方时，CSS解决方案无法工作，因为在这种情况下，搜索框位于选择区域之上。当滚动页面时，位置自动更改，Javascript解决方案无法正常工作。 –

定位下拉使用由SELECT2插件提供的核心功能的适当的方式。

它为我们提供了 'dropdownParent' 属性放置到特定元素

选择场内下拉列表：＃编辑现场作业技能-TID

父项：div.form，本期特价货品field-job-skillsets-tid

jQuery("#edit-field-job-skillsets-tid").select2(
    {dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')} 
);

来源

2016-01-05 07:12:06 jospratik

选择二变容器位置

回答

相关问题