Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Select2 field width hard to resize

Tags:

html

jquery

css

jquery-select2

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>
like image 720
Dolorosa Avatar asked May 16 '18 05:05

Dolorosa

1 Answers

can you please add below css and check 

.form-unit .select2-container, .form-unit .select2-selection {
    width: 100% !important;
}
like image 73
PPL Avatar answered Oct 12 '22 23:10

PPL
Sign in to Comment

Related questions

selectize dropdown height base on screen height
How to load Jquery plugin/script when Vue router changes page?
Some Toolbar Buttons are missing in Froala wysiwyg Editor
Download PDF file With FTP using XMLHttpRequest and generic handler
Select2 Dropdown Multiple select and unselect
Call Jquery function when bootstrap modal is open
Update element with ajax don't affect until for loop end
Can't get value from Summernote textarea using Javascript AJAX send post data
How do I give my `<div>` elements a animation entry when my website loads
On clicking on a specific child a different jQuery should run
Spam responses from website contact form bypassing 'required' and 'pattern' attributes
Ajax success response and select option append
why jquery position() method does not have a setter version
FullCalendar custom button icon not showing
delay() or timeout with stop()?
jquery select2 - not working
show and hide divs based on radio button click [duplicate]
iframe just before unload event
Change div width live with jQuery
How to call parent window function from child window jquery?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!