Responsive Select2 In Html

From last few years I use select2 for making effective dropdown in bootstrap. In last days I am trying to make it responsive but it doesn’t perform so well.

Here is a nice thread to make it work.

https://github.com/select2/select2/issues/3278

using these tricks you can make it responsive which is quite awesome. Still it’s missing something.

In my implementation I need a feature that I can put it on a small space and I want to use the full width when someone use it.

So I look at The HTML generated by the plugin. I see select2 plugin generate some html div just after the select. If you try to set width or something on select2 after generation or before applying select2 thing will not work well.

The solution is you can write the css code for generated div. for example if you write

.select2-container{

width:90px;

}

it will make the select2 90px. that’s the way we modify the css of generated html, but wait, what about if I click on the select2 and I want to use more width available on the screen. I inspect and go into more detail and found that the plugin generated the div to show that searchbar and list that I see in select2.

the dropdown that you seen on html page have these classes

select2-dropdown select2-dropdown—below

so if you assign it more width (that you want to see when someone open the select) then you need to make width to these dropdown container div, for example

.select2-dropdown{

width:180px;

}

so in this implementation I have a select2 with 90px width that will used 180px width when someone use it for type something or select.

Here is a quick demo for the post. https://codepen.io/anirugu/pen/YxMaqR

Thanks for reading my post.

Happy coding