我正在创建一个具有各种输入类型的表单,并使用select2进行可搜索的下拉列表(请查看“类型”字段).
我想让所有字段都响应这些规范:
>对于等于或大于768px的屏幕,表格容器固定为786px
>对于576px和767px之间的屏幕,表单容器是100%屏幕减去小左右填充(字段宽度调整屏幕宽度)
>对于等于或小于575px的屏幕,所有字段都垂直对齐,宽度为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;
}