title: Select2 field width hard to resize
body: <p>I'm creating a form with various type of input and use select2 for searchable dropdown (please take a look at "Type" field).</p>
  
  <p>I want to make all of the fields responsive with these specifications:</p>
  
  <ul>
  <li>For screen equal or larger than 768px, the form container fixed at 786px</li>
  <li>For screen between 576px and 767px, the form container is 100% the screen minus little right and left padding (the fields width inside adjust the screen width)</li>
  <li>For screen equal or smaller than 575px, all fields get aligned vertically with 100% width (adjust the screen width)</li>
  </ul>
  
  <p>I (currently) don't have any problem to make all the fields responsive, except for the searchable dropdown with select2 (field "Type"). Since when I tried putting the same responsive class for its elements doesn't affect anything, my approach is to detect the responsive input's width (<code>.input-type</code>) on document ready and resize screen, then change the searchable dropdown's elements width using css with responsive width obtained. </p>
  
  <p>Unfortunately, it still doesn't work.</p>
  
  <p>Did I do anything wrong? Any help appreciated! :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#popup").click(function() {
    $("#emp-name").val("Stella Kurniawan");
    $("#emp-id").val("001");
  });
  
  $(".input-datepicker").datepicker({
      format: "dd M yyyy",
      maxViewMode: 2,
      todayBtn: "linked",
      clearBtn: true,
      orientation: "top right",
      autoclose: true
  });
  
  $(document).ready(function() {
    $("#type").select2({
      placeholder: "Select type"
    });
    dropdownWidthAdjust();
  });
  
  $(function () {
    $("#choices").on("keyup", function () {
      $(".choices-list").show();
      var query = this.value;
      $(".combobox-value").each(function (i, elem) {
        if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) != -1) {
          $(this).show();
          $(this).parent().show();
        } 
        else {
          $(this).hide();
          $(this).parent().hide();
        }
      });
    });
  });
  
  var countChecked = 0;
  var allCombo = $(".combobox-each").length;
  
  $(".combobox-select").click(function() {
    countChecked = $(".combobox-each .checkbox-checked").length;
    if (allCombo != countChecked) {
      $(".choices-list .checkbox").addClass("checkbox-checked");
      $(".choices-list .checkbox i").addClass("symbol-checked");
      $(".combobox-label").text("Categorized Choices (10/10)");
      $(this).text("Uncheck All");
    }
    else {
      $(".choices-list .checkbox").removeClass("checkbox-checked");
      $(".choices-list .checkbox i").removeClass("symbol-checked");
      $(".combobox-label").text("Categorized Choices (0/10)");
      $(this).text("Check All");
    }
  });
  
  $(".combobox-each").click(function() {
    $(this).find(".checkbox").toggleClass("checkbox-checked");
    $(this).find(".checkbox i").toggleClass("symbol-checked");
    countChecked = $(".combobox-each .checkbox-checked").length;
    $(".combobox-label").text("Categorized Choices (" + countChecked + "/" + allCombo + ")");
    if (countChecked == allCombo) {
      $(".combobox-select").text("Uncheck All");
    }
    else {
      $(".combobox-select").text("Check All");
    }
  });
  
  $(".checkbox-regular-each").click(function() {
    $(this).find(".checkbox").toggleClass("checkbox-checked");
    $(this).find(".checkbox i").toggleClass("symbol-checked");
  });
  
  $(window).resize(function() {
    dropdownWidthAdjust();
  });
  
  function dropdownWidthAdjust() {
    var dropdownWidth = $(".input-text").width();
    $(".select2-dropdown").css({"width" : dropdownWidth + "px"});
    $(".select2-selection").css({"width" : dropdownWidth + "px"});
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form {
    margin-bottom: 40px;
    margin: 0 auto;
    width: 768px;
    font-family: 'Open Sans', sans-serif;
  }
  
  h1 {
   font-size: 13px;
    text-transform: uppercase;
    color: #0099ff;
    margin-bottom: 24px;
  }
  
  .input-text {
    height: 34px;
    border: solid 1px #c4c4c4;
    width: 366px;
    font-size: 13px;
    padding: 0 0 0 12px;
    margin-bottom: 24px;
    color: #333;
    background-color: #fff;
    border-radius: 0;
  }
  
  ::placeholder {
    color: #999; 
  }
  
  .form-input-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
  }
  
  .input-disabled {
    background-color: #eee; 
  }
  
  .form-unit {
    position: relative;
    vertical-align: top;
  }
  
  .input-select-btn {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 25px;
    right: 0;
    text-align: center;
    line-height: 34px;
  }
  
  .on-disabled-btn {
    border: solid 1px #c4c4c4;
    background-color: #fff;
  }
  
  .input-select-btn i {
    font-size: 12px;
    color: #333;
  }
  
  .form-row {
    display: block;
    width: 100%;
    margin: 0 !important;
  }
  
  .form-divided {
    display: inline-block;
  }
  
  .form-divided-left {
    margin-right: 32px;
  }
  
  .datepicker-calendar {
    position: absolute;
  }
  
  .select2-selection {
    height: 34px !important; 
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border-radius: 0 !important;
    border: solid 1px #c4c4c4 !important;
    padding-left: 4px;
  }
  
  .select2-selection:hover,
  .select2-selection:focus,
  .select2-selection:active {
    box-shadow: transparent !important; 
  }
  
  .select2-results__options li {
    display: block; 
  }
  
  .select2-selection__rendered {
    transform: translateY(2px);
  }
  
  .select2-selection__arrow {
    display: none;
  }
  
  .select2-dropdown {
    border-radius: 0 !important;
    border: solid 1px #c4c4c4;
  }
  
  .form-dropdown {
    margin-bottom: 24px; 
  }
  
  #choices {
    margin-bottom: 0; 
  }
  
  .choices-list {
    border: solid 1px #c4c4c4;
    padding-top: 18px;
    height: 154px;
    overflow-y: scroll;
    overflow-x: hidden;
    transform: translateY(-1px);
    margin-bottom: 24px;
  }
  
  .checkbox-regular-list {
    margin-top: 18px; 
  }
  
  .checkbox-regular-each {
    display: block; 
  }
  
  .choices-list input,
  .checkbox-regular-each input {
    position: relative;
    opacity: 0;
    width: 1px;
  }
  
  .choices-list .checkbox,
  .checkbox-regular-each .checkbox {
    margin: 0 12px 0 16px;
    display: inline-block;
    width: 18px;
    height: 18px;
  }
  
  .checkbox-regular-each .checkbox {
    margin-left: 0; 
  }
  
  .checkbox-regular-each .checkbox[disabled="disabled"] {
    cursor: default;
    border: solid 1px #c4c4c4;
    background-color: #eee;
  }
  
  .choices-list .checkbox i,
  .checkbox-regular-each .checkbox i {
    display: none;
    margin-left: 1px;
    transform: translateY(-1px);
  }
  
  .checkbox-regular-each .checkbox .disabled-check {
    display: inline-block; 
    color: #999;
    cursor: default;
  }
  
  .symbol-checked {
    display: inline-block !important;
  }
  
  .checkbox-checked {
    border: solid 1px #00c983;
    margin-top: 2px;
  }
  
  .combobox-value,
  .checkbox-regular-value {
    display: inline-block; 
    vertical-align: top;
    font-weight: 400;
    font-size: 13px;
  }
  
  .combobox-each,
  .checkbox-regular-each {
    display: block;
    margin-bottom: 8px;
  }
  
  .checkbox-regular-each 
  
  .combobox-label-row {
    display: block;
  }
  
  .combobox-label {
    display: inline-block;
  }
  
  .combobox-select {
    font-weight: 700;
    font-size: 12px;
    color: #00c983;
    cursor: pointer;
    width: auto;
    float: right;
  }
  
  .combobox-select:hover {
    color: #00c983;
    text-decoration: none;
  }
  
  .labeled-row {
    display: block;
    width: 366px;
  }
  
  .labeled-label {
    display: inline-block;
    width: 96px;
    margin-right: 16px;
    line-height: 34px;
    padding-left: 16px;
    font-size: 13px;
  }
  
  .labeled-input {
    display: inline-block;
    position: relative;
    float: right;
    width: calc(100% - 115px);
  }
  
  .labeled-input .input-text {
    width: 100%; 
    margin-bottom: 8px;
  }
  
  .labeled-input a {
    position: absolute;
    top: 0; 
    right: 0;
    color: #333;
  }
  
  .labeled-input a:hover,
  .labeled-input a:focus,
  .labeled-input a:active {
    color: #333;
    text-decoration: none;
  }
  
  .form-unit .select2-container, .form-unit .select2-selection {
      width: 100% !important;
  }
  
  @media (max-width: 767px) and (min-width: 576px) {
    .form {
      padding-left: 16px;
      padding-right: 16px;
      width: 100%;
    }
    
    .form-divided-left {
      margin-right: 24px;
    }
    
    .form-divided {
      width: calc(50% - 14px);
    }
    
    .input-text {
      display: inline-block;
      width: 100%;
    }
    
    .input-select-btn {
      right: 0;
    }
    
    .labeled-row {
      display: block;
      width: 100%;
    }
  }
  
  @media (max-width: 575px) {
    .form {
      padding-left: 16px;
      padding-right: 16px;
      width: 100%;
    }
    
    .form-divided {
      display: block; 
      width: 100%;
    }
    
    .form-divided-left {
      margin-right: 0; 
    }
    
    .input-text {
      display: inline-block;
      width: 100%;
    }
    
    .labeled-row {
      display: block;
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"&gt;
  
  &lt;div class="form"&gt;
    &lt;div class="form-row"&gt;
      &lt;div class="form-unit form-divided form-divided-left"&gt;
        &lt;label for="code" class="form-input-label"&gt;Code&lt;/label&gt;
        &lt;input id="code" class="input-text" type="text" placeholder="Add code"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-row"&gt;
      &lt;div class="form-unit form-divided form-divided-left"&gt;
        &lt;label for="emp-name" class="form-input-label"&gt;Employee Name&lt;/label&gt;
        &lt;input id="emp-name" class="input-text input-disabled" disabled="disabled" type="text" placeholder="Select employee name"&gt;
        &lt;a class="input-select-btn on-disabled-btn" id="popup"&gt;&lt;i class="fas fa-user"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="form-unit form-divided"&gt;
        &lt;label for="emp-id" class="form-input-label"&gt;Employee ID&lt;/label&gt;
        &lt;input id="emp-id" class="input-text input-disabled" disabled="disabled" type="text" value=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-row"&gt;
      &lt;div class="form-unit form-divided form-divided-left"&gt;
        &lt;label for="date" class="form-input-label"&gt;Date&lt;/label&gt;
        &lt;input type="text" class="input-text input-datepicker" id="date" placeholder="Select date"&gt;
        &lt;a class="input-select-btn" id="datepicker-btn"&gt;&lt;i class="fas fa-calendar-alt"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="form-unit form-divided form-dropdown"&gt;
        &lt;label for="type" class="form-input-label"&gt;Type&lt;/label&gt;
        &lt;select id="type" class="input-text"&gt;
          &lt;option&gt;&lt;/option&gt;
          &lt;option value="1"&gt;Option 1&lt;/option&gt;
          &lt;option value="2"&gt;Option 2&lt;/option&gt;
          &lt;option value="3"&gt;Option 3&lt;/option&gt;
        &lt;/select&gt;
        &lt;a class="input-select-btn"&gt;&lt;i class="fas fa-sort-down"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-row"&gt;
      &lt;div class="form-unit form-divided form-divided-left"&gt;
        &lt;div class="combobox-label-row"&gt;
          &lt;label for="choices" class="form-input-label combobox-label"&gt;Categorized Checkboxes (0/10)&lt;/label&gt;
          &lt;a class="combobox-select"&gt;Check All&lt;/a&gt;
        &lt;/div&gt;
        &lt;input id="choices" class="input-text" type="text" placeholder="Search choices"&gt;
        &lt;a class="input-select-btn" id="datepicker-btn"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul class="choices-list"&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-1" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-1"&gt;Choice ABC&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-2" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-2"&gt;Choice BCD&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-3" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-3"&gt;Choice DEF&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-4" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-4"&gt;Choice GHI&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-5" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-5"&gt;Choice IJK&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-6" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-6"&gt;Choice UVW&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-7" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-7"&gt;Choice XYZ&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-8" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-8"&gt;Choice 123&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-9" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-9"&gt;Choice 345&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="combobox-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="choice-10" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="combobox-value" for="choice-10"&gt;Choice 789&lt;/label&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="form-unit form-divided"&gt;
        &lt;label for="checkbox-regular" class="form-input-label"&gt;Checkboxes&lt;/label&gt;
        &lt;ul class="checkbox-regular-list"&gt;
          &lt;li class="checkbox-regular-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="reg-choice-1" checked&gt;&lt;span class="checkbox" disabled="disabled"&gt;&lt;i class="fas fa-check disabled-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="checkbox-regular-value" for="reg-choice-1"&gt;Choice 1&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="checkbox-regular-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="reg-choice-2" checked&gt;&lt;span class="checkbox" disabled="disabled"&gt;&lt;/span&gt;
            &lt;label class="checkbox-regular-value" for="reg-choice-2"&gt;Choice 2&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="checkbox-regular-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="reg-choice-3"&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="checkbox-regular-value" for="reg-choice-3"&gt;Choice 3&lt;/label&gt;
          &lt;/li&gt;
          &lt;li class="checkbox-regular-each"&gt;
            &lt;input type="checkbox" class="checkbox-input" id="reg-choice-4" checked&gt;&lt;span class="checkbox"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;label class="checkbox-regular-value" for="reg-choice-4"&gt;Choice 4&lt;/label&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="form-row"&gt;
      &lt;div class="form-unit form-divided form-divided-left"&gt;
        &lt;label class="form-input-label"&gt;Labeled, Numeric, Multi Entries&lt;/label&gt;
        &lt;div class="labeled-row"&gt;
          &lt;div class="labeled-label"&gt;
            Percentage
          &lt;/div&gt;
          &lt;div class="labeled-input"&gt;
            &lt;input id="emp-name" class="input-text" type="text" placeholder="Add percentage"&gt;
            &lt;a class="input-select-btn on-disabled-btn" id="popup"&gt;%&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="labeled-row"&gt;
          &lt;div class="labeled-label"&gt;
            Percentage
          &lt;/div&gt;
          &lt;div class="labeled-input"&gt;
            &lt;input id="emp-name" class="input-text" type="text" placeholder="Add percentage"&gt;
            &lt;a class="input-select-btn on-disabled-btn" id="popup"&gt;%&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-unit form-divided"&gt;
        
        
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>