How to make dropdown menu open left using Select2 4.0
Question
I saw an example in jsfiddle that makes the dropdown box open left if the screen is too small:
$(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>
Original Snippet here:
I am using select2 4.0 Full version and I wish to have the same behavior. Moreover, I would like my dropdown box to always open left as well, but even though the code is identical I cannot make that happen due to the different library versions:
I have searched and read questions here, but all I found was ways to prevent the dropdown from switching to drop-up when the page is too small, and that is not what I am looking for.
How can I achieve this?
1 answers
solution1
1 ACCPTED 2015-09-15 11:03:26
Unfortunately, there is no clean answer for this. This feature of select2 is simply not customizable. Thus, to fix it we resorted to a CSS mini-hack and set the margin-left of the dropdown to a specific negative value that conveys our needs:
.bigdrop-left {
margin-left: -200px;
}
The fiddle can be seem here:
Note that the box will always open left, no matter what.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.