Select2 field width hard to resize

Question

I'm creating a form with various type of input and use select2 for searchable dropdown (please take a look at "Type" field).

I want to make all of the fields responsive with these specifications:

• For screen equal or larger than 768px, the form container fixed at 786px
• 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)
• For screen equal or smaller than 575px, all fields get aligned vertically with 100% width (adjust the screen width)

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 (.input-type) on document ready and resize screen, then change the searchable dropdown's elements width using css with responsive width obtained.

Unfortunately, it still doesn't work.

Did I do anything wrong? Any help appreciated! :)

$("#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"});
}

.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%;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="form">
  <div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <label for="code" class="form-input-label">Code</label>
      <input id="code" class="input-text" type="text" placeholder="Add code">
    </div>
  </div>
  <div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <label for="emp-name" class="form-input-label">Employee Name</label>
      <input id="emp-name" class="input-text input-disabled" disabled="disabled" type="text" placeholder="Select employee name">
      <a class="input-select-btn on-disabled-btn" id="popup"><i class="fas fa-user"></i></a>
    </div>
    <div class="form-unit form-divided">
      <label for="emp-id" class="form-input-label">Employee ID</label>
      <input id="emp-id" class="input-text input-disabled" disabled="disabled" type="text" value="">
    </div>
  </div>
  <div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <label for="date" class="form-input-label">Date</label>
      <input type="text" class="input-text input-datepicker" id="date" placeholder="Select date">
      <a class="input-select-btn" id="datepicker-btn"><i class="fas fa-calendar-alt"></i></a>
    </div>
    <div class="form-unit form-divided form-dropdown">
      <label for="type" class="form-input-label">Type</label>
      <select id="type" class="input-text">
        <option></option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <a class="input-select-btn"><i class="fas fa-sort-down"></i></a>
    </div>
  </div>
  <div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <div class="combobox-label-row">
        <label for="choices" class="form-input-label combobox-label">Categorized Checkboxes (0/10)</label>
        <a class="combobox-select">Check All</a>
      </div>
      <input id="choices" class="input-text" type="text" placeholder="Search choices">
      <a class="input-select-btn" id="datepicker-btn"><i class="fas fa-search"></i></a>
      <ul class="choices-list">
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-1" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-1">Choice ABC</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-2" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-2">Choice BCD</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-3" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-3">Choice DEF</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-4" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-4">Choice GHI</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-5" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-5">Choice IJK</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-6" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-6">Choice UVW</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-7" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-7">Choice XYZ</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-8" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-8">Choice 123</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-9" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-9">Choice 345</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-10" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-10">Choice 789</label>
        </li>
      </ul>
    </div>
    <div class="form-unit form-divided">
      <label for="checkbox-regular" class="form-input-label">Checkboxes</label>
      <ul class="checkbox-regular-list">
        <li class="checkbox-regular-each">
          <input type="checkbox" class="checkbox-input" id="reg-choice-1" checked><span class="checkbox" disabled="disabled"><i class="fas fa-check disabled-check"></i></span>
          <label class="checkbox-regular-value" for="reg-choice-1">Choice 1</label>
        </li>
        <li class="checkbox-regular-each">
          <input type="checkbox" class="checkbox-input" id="reg-choice-2" checked><span class="checkbox" disabled="disabled"></span>
          <label class="checkbox-regular-value" for="reg-choice-2">Choice 2</label>
        </li>
        <li class="checkbox-regular-each">
          <input type="checkbox" class="checkbox-input" id="reg-choice-3"><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="checkbox-regular-value" for="reg-choice-3">Choice 3</label>
        </li>
        <li class="checkbox-regular-each">
          <input type="checkbox" class="checkbox-input" id="reg-choice-4" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="checkbox-regular-value" for="reg-choice-4">Choice 4</label>
        </li>
      </ul>
    </div>
    <div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <label class="form-input-label">Labeled, Numeric, Multi Entries</label>
      <div class="labeled-row">
        <div class="labeled-label">
          Percentage
        </div>
        <div class="labeled-input">
          <input id="emp-name" class="input-text" type="text" placeholder="Add percentage">
          <a class="input-select-btn on-disabled-btn" id="popup">%</a>
        </div>
      </div>
      <div class="labeled-row">
        <div class="labeled-label">
          Percentage
        </div>
        <div class="labeled-input">
          <input id="emp-name" class="input-text" type="text" placeholder="Add percentage">
          <a class="input-select-btn on-disabled-btn" id="popup">%</a>
        </div>
      </div>
    </div>
    <div class="form-unit form-divided">
      
      
    </div>
  </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

Answer 1

can you please add below css and check

.form-unit .select2-container, .form-unit .select2-selection {
    width: 100% !important;
}