Select2 字段宽度难以调整大小

Posted 2023-05-07

技术标签:

【中文标题】Select2 字段宽度难以调整大小【英文标题】：Select2 field width hard to resize 【发布时间】：2018-10-26 01:07:09 【问题描述】：

我正在创建一个具有各种输入类型的表单，并使用 select2 进行可搜索的下拉菜单（请查看“类型”字段）。

我想让所有字段都响应这些规范：

对于等于或大于768px的屏幕，表单容器固定在786px 对于 576px 和 767px 之间的屏幕，表单容器是 100% 的屏幕减去很少的左右填充（里面的字段宽度调整屏幕宽度）对于等于或小于 575 像素的屏幕，所有字段以 100% 宽度垂直对齐（调整屏幕宽度）

除了带有 select2 的可搜索下拉菜单（字段“类型”）之外，我（目前）没有任何问题可以使所有字段都响应。因为当我尝试为其元素放置相同的响应类时不会影响任何东西，所以我的方法是在文档准备好并调整屏幕大小时检测响应输入的宽度 (.input-type)，然后使用带有响应的 css 更改可搜索下拉列表的元素宽度获得的宽度。

不幸的是，它仍然不起作用。

我做错了吗？任何帮助表示赞赏！ :)

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

【问题讨论】：

【参考方案1】：

你能在下面添加css并检查

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

【讨论】：

谢谢！它不适用于最大的断点，但我可能可以自己修复它:) 如果你有空闲时间，你能看看最后的字段（“Labeled, Numeric, Multi Entries”）吗？我是否做错了什么导致布局表现得像那样？非常感谢！ :)

以上是关于Select2 字段宽度难以调整大小的主要内容，如果未能解决你的问题，请参考以下文章

通过文本字段上的自动布局调整字体大小并改变高度

UITextField 调整大小问题

Extjs - 当Compositefield中的项目增长/调整大小时如何调整兄弟姐妹的位置

ExtJs 4 - 调整窗口大小时未保持 TextField 高度

调整引导表单字段的大小并对齐

JCrop 将选择的大小调整为错误的值