自适应固定入口组 Select2 和表格管理的另一个元素或 input-group-btn
我正在尝试完成文件加载系统的设计:
系统具有初始 Select2; 然后它与搜索按钮相结合 /搜索文件/; 然后我们有输入文本,我显示文件名; 之后我需要 3 按钮:一个预览,另一个允许我添加更多字符串,还有一个,允许我删除它们。
但我不能让它看起来像 col-sm-12, 怎么样 col-sm-6
检查输入文本是否仅在中间读取; 它有 80% C,但我需要它来过滤中间行中的所有空间。
系统具有初始 Select2; 然后它与搜索按钮相结合 /搜索文件/; 然后我们有输入文本,我显示文件名; 之后我需要 3 按钮:一个预览,另一个允许我添加更多字符串,还有一个,允许我删除它们。
但我不能让它看起来像 col-sm-12, 怎么样 col-sm-6
$/".select2"/.select2/{
theme: "bootstrap",
placeholder: "Buscar y Selecionar",
allowClear: true,
}/;
.btn-file {
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100px;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha/opacity=0/;
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
.btn-file input[readonly] {
background-color: white !important;
cursor: text !important;
}
.obj-file {
width: 98% !important;
height: 100% !important;
min-height: calc/100vh - 200px/ !important;
overflow: auto !important;
}
.text-file {
float: right !important;
width: 60% !important;
}
<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://use.fontawesome.com/releases/v5.0.13/css/all.css"]https://use.fontawesome.com/re ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>
<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>
<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
<script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<div class="form-group">
<div class="col-sm-6">
<div class="input-group select2-bootstrap-append">
<div class="input-group-btn">
<select class="form-control select2">
<option>Selec.</option>
<option>Prueba 2 max with</option>
<option>Prueba 3</option>
<option>Prueba 4</option>
<option>Prueba 5</option>
</select>
<span class="btn btn-primary btn-file">Buscar <i class="fas fa-file-alt"></i><input accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="i_file_1" name="i_file_1" required="" type="file"/></span>
</div>
<input class="form-control text-file" name="text_file_1" readonly="" type="text"/>
<div class="input-group-btn">
<span class="btn btn-info btn-disabled view-doc btn-view" data-target="#modal-info-i_file_1" data-toggle="modal" disabled="">Vista Previa</span>
<span class="btn btn-info"><i class="fas fa-plus-square"></i></span>
<span class="btn btn-info"><i class="fas fa-minus-square"></i></span>
</div>
</div>
</div>
</div>
检查输入文本是否仅在中间读取; 它有 80% C,但我需要它来过滤中间行中的所有空间。
没有找到相关结果
已邀请:
2 个回复
君笑尘
赞同来自:
裸奔
赞同来自:
在 BS 3.X
:
在 BS 4.X:
用于动态初始化的自定义脚本 select2
工作 add, remove file event 与我联系。