1

我在 jsfiddle 中看到了一个示例,如果屏幕太小,下拉框会向左打开:

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});
#e1 {
    width: 100px;       
}
.bigdrop{
    width: 600px !important;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.3.2/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.3.2/select2.css" rel="stylesheet"/>

<body>
    <select id="e1">
       <option value="AL">Alabama</option>
       <option value="WY">Wyoming</option>
       <option value="WY">very long long long text</option>
       <option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
    </select>
</body>

原始片段在这里:

我正在使用 select2 4.0 完整版,我希望有相同的行为。此外,我希望我的下拉框也总是向左打开,但即使代码相同,由于库版本不同,我也无法做到这一点:

我在这里搜索并阅读了问题,但我发现的只是当页面太小时防止下拉菜单切换到下拉菜单的方法,这不是我想要的。

我怎样才能做到这一点?

4

1 回答 1

1

不幸的是,对此没有明确的答案。select2 的此功能根本无法自定义。因此,为了解决这个问题,我们使用了 CSS mini-hack 并将下拉菜单的 margin-left 设置为一个特定的负值,以表达我们的需求:

.bigdrop-left {
    margin-left: -200px;
}

小提琴可以在这里:

请注意,无论如何,盒子总是向左打开。

于 2015-09-15T11:03:26.393 回答