Question

我在jsfiddle中看到一个例子，如果屏幕太小，下拉框会向左打开：

＆＃13;

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

＆＃13;

#e1 {
    width: 100px;       
}
.bigdrop{
    width: 600px !important;

}

＆＃13;

<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>

＆＃13;

原始代码段在这里：

http://jsfiddle.net/ewwAX/1/

我正在使用select2 4.0完整版，我希望有相同的行为。此外，我希望我的下拉框始终向左打开，但即使代码相同，由于库版本不同，我也无法实现这一点：

https://jsfiddle.net/vv6hgos5/

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

我怎样才能做到这一点？

Answer 1

不幸的是，对此没有干净的答案。 select2的这个功能根本无法自定义。因此，为了解决这个问题，我们采用了CSS mini-hack，并将下拉列表的左边距设置为一个特定的负值，以满足我们的需求：

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

小提琴可以在这里看起来：

https://jsfiddle.net/vv6hgos5/1/

请注意，无论如何，该框都会始终向左打开。

如何使用Select2 4.0使下拉菜单向左打开

1 个答案: