select2 not responsive, width larger than container

Issue

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?

Solution

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>

Answered By - Vlado Pandžić