select2 not responsive, width larger than container

Question

I have a problem with the width of a select2 dropdown in my ASP.NET page. When I try to view the page with the Chrome emulator of devices screen, the select2 is larger than the containing div, and on the right it goes out of the screen. I saw with code inspection that it adds automatically a style attribute style="width: 498px;" in the <span class="select2 select2-container select2-container--bootstrap select2-container--below"> element that I did not set anywhere. The only operation that I did is to set $("#ContentPlaceHolderContent_mySelect").select2(); in the document.ready function(). My select2 dropdown is contained in a block:

<div class="form-group">    <label class="control-label col-md-3">Select structure</label>    <div class="col-lg-5 col-md-9">       <select class="form-control" id="mySelect" runat="server"></select>     </div> </div> 

How can I remove that style="width" option?

Answer 1

Select2 adds class .select2. You can override what script does using css. Here I'm set select2 to have 100% width, using !important. If I would not do that select2 would have 24px width.

You can further customize other classes that select2 generates using some principle.

$(document).ready(function(){  $("#mySelect").select2();  });

.select2 {  width:100%!important;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>    <div class="form-group">     <label class="control-label col-md-3">Select structure</label>     <div class="col-lg-5 col-md-9">        <select class="form-control" id="mySelect" runat="server"></select>       </div>  </div>