[CSS] How To Fixed Select2 Responsive Width

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

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.