[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

Select2 Default Css Width Without Data

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

Fixed And Problem Solved Select2 Responsive Width

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.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.