Some of the problems that occur when using select2 plugins are wide element problems. By default, select2 will follow the width of the length of the text option. If the select2 element that you are using doesn’t have a value yet / you use Ajax Autocomplete to find and display data in select2 then the width is none. To solved this problem we changed the code of CSS a little. Follow the following short tutorial
How to Fixed Select2 Responsive Width
By default and without data at all, the select2 display looks like the following image
The above display is not neat and looks ugly. Add the following CSS below to improve the select2 responsive width
1 2 3 4 5 6 | .select2-container{ width: 100%!important; } .select2-search--dropdown .select2-search__field { width: 98%; } |
After adding the CSS above, the select2 display becomes as follows
Other Articles : How To Use Select2 Remote AJAX With Example in JQuery, PHP And MySQL
So a short tutorial on how to fix select2 width, hopefully, useful and the problem is solved.
