jquery - Select2 字段宽度难以调整大小-6ren

jquery - Select2 字段宽度难以调整大小

转载作者：搜寻专家更新时间：2023-10-31 08:50:43

26

4

我正在创建一个包含各种输入类型的表单，并使用 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>

最佳答案

你能不能在下面添加css并检查

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

关于jquery - Select2 字段宽度难以调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50363063/

26

4

0

文章推荐： javascript - 导致占位符错误换行的空格

文章推荐： javascript - Firefox 与 Chrome JavaScript 解释器的异同

文章推荐： javascript - 图像根据父 div 大小调整大小或裁剪

文章推荐： javascript - 将用户上传的纹理加载到 three.js 中的几何体

javascript - react JSX : selecting "selected" on selected
我试图通过用空格填充文本来创建下拉列表中的列效果，如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
select - JPA - MAX of COUNT 或 SELECT FROM SELECT
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
jquery - 为什么我们用 select 标签编写 .attr ('selected' ,'selected' )
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
select - "selected"选项上的标签在选择具有FormControlname时不起作用
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么，但在那种情况下没有选择的选项，我必须从列表中选择一些东西。当我从选
jquery - removeAttr ("selected") 和 .attr ('selected' ,'selected' ) 无法正常工作
我的表单中有两个选择字段。第一个是单选，另一个是多选。现在我想做的是根据单选中所选的选项，使用给定的数据选择多选中的选项。为此，我在单选更改时触发 ajax 请求: $.ajax({ type
select - Firefox 5 在页面刷新时不使用 select ="selected"值，保留旧值
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是，我认为它可能在 Firefox 4 中工作，因为我刚买了一台新电脑，而且我不记得以前见过这个错误。我有几个选择框。所选值
MySQL: select * from table 和 select * from (select* from table) 的区别
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
html - HTML <选项> : selected VS selected ="selected" 的最佳实践
预选的最佳做法是什么？在？根据不同的网站，两者都有效。但是哪个更好呢？最兼容？ Foo Bar 最佳答案如果您正在编写 XHTML，则 selected="selected" 是必需的。如
javascript - Angular JS : "Select All" options of "multi-select select box"
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
select - 在列上使用 defaultValue 属性(但不是
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
javascript - 将选项从 - 选项 select 属性被破坏了吗？
我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用
Mongodb select with condition is selected result must in sub select query
你如何在 MongoDB 中进行嵌套选择，类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
Angular 2 : Select dropdown not selecting option despite "selected" attribute
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
Use [ngValue] and [selected] in select tag(在选择标记中使用[ngValue]和[selected])
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。。示例代码：。这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就

首页

博学

6Ren·AI

商城

jquery - Select2 字段宽度难以调整大小