- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在尝试完成文件上传系统的设计:系统有一个 Initial Select2;然后它与搜索按钮连接(搜索文件);然后我们有一个输入文本,我在其中显示文件名;在此之后我需要 3 个按钮:一个预览按钮,另一个允许我添加更多行,另一个允许我删除它们。
但我不能让它看起来像 col-sm-6 中的 col-sm-12
$(".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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<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 id="i_file_1" type="file" name="i_file_1" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required></span>
</div>
<input type="text" class="form-control text-file" name="text_file_1" readonly>
<div class="input-group-btn">
<span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" 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>
在 mid 上检查只读的输入文本;这有 80%,但我需要它填充所有实例中的行中的空间。
最佳答案
我已经找到解决问题的方法了
在 BS 3.X 中:
$(".select2").select2({
theme: "bootstrap",
placeholder: "Buscar y Selecionar",
width: 'auto',
dropdownAutoWidth: true,
allowClear: true,
});
.btn-file {
overflow: hidden;
border-radius: 0 !important;
}
.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;
}
.text-file {
float: right !important;
width: 100% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<div class="row">
<div class="col-sm-12 form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<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>
</div>
<div class="input-group-btn">
<span class="btn btn-primary btn-file">Buscar <i class="fas fa-file-alt"></i><input id="i_file_1" type="file" name="i_file_1" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required></span>
</div>
<input type="text" class="form-control text-file" name="text_file_1" readonly>
<div class="input-group-btn">
<span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" 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>
</div>
</div>
在 BS 4.X 中:动态初始化 select2 的自定义脚本
$('select').each(function () {
$(this).off('change');
$(this).select2({
theme: 'bootstrap4',
placeholder: "Buscar y Selecionar",
width: 'auto',
dropdownAutoWidth: true,
});
});
.select2-container--bootstrap4 .select2-selection--single{height:calc(2.25rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:2.25rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:2.25rem}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(2.25rem + 2px)!important;height:calc(2.25rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0;padding-right:5px;cursor:pointer;float:left;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:700;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container :focus{outline:0}.select2-container--bootstrap4 .select2-selection{border:1px solid #ced4da;border-radius:.25rem;width:100%}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#17a2b8;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid~.select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:1.2em;height:1.2em;line-height:1.15em;padding-left:.3em;margin-top:.5em;border-radius:100%;background-color:#6c757d;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#343a40}/*fileupload*/
.select-file{
display: none !important;
}
.btn-file input[readonly] {
background-color: white !important;
cursor: text !important;
}
.custom-file-label {
width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.custom-file-label{
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.obj-file {
width: 98% !important;
height: 100% !important;
min-height: calc(95vh - 200px) !important;
overflow: auto !important;
}
/*Fix Select2 Container*/
.select2-bootstrap4-prepend >
.select2-container > .selection > .select2-selection--single {
border-radius: .25rem 0 0 .25rem !important;
}
.select2-bootstrap4-append >
.select2-container > .selection > .select2-selection--single {
border-radius: 0 .25rem .25rem 0 !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<div class="row">
<div class="col-lg-6">
<div class="form-group row file-plugin">
<div class="col-lg-12">
<div class="input-group select2-bootstrap4-prepend">
<select class="custom-select select-file" name="s_file_1">
<option>Selec.</option>
<option>Prueba 2 max with</option>
<option>Prueba 3</option>
<option>Prueba 4</option>
<option>Prueba 5</option>
</select>
<div class="custom-file btn-file">
<input type="file" class="custom-file-input" id="i_file_1" name="i_file[]" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
<label class="custom-file-label">Sin Archivo</label>
</div>
<div class="input-group-append">
<button type="button" class="btn btn-info btn-disabled view-doc btn-view" data-toggle="modal" data-target="#modal-info-i_file_1" disabled="disabled">Vista Previa <i class="fas fa-file-alt"></i></button>
<button type="button" class="btn btn-info btn-disabled remfile" disabled="disabled"><i class="fas fa-minus-square"></i></button>
<button type="button" class="btn btn-info addfile" data-file="none"><i class="fas fa-plus-square"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
工作添加,删除文件事件联系我。
关于javascript - 使用 Select2 和其他表单控制元素或 input-group-btn 响应修复输入组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50540292/
在 的 React 组件中菜单,我需要设置selected反射(reflect)应用程序状态的选项的属性。 在 render() , optionState从状态所有者传递给 SortMenu 组件
我是初级 Ruby-mysql 程序员,我想知道如何使我的(存储过程)查询结果更快.. 这是我的存储过程我正在使用 SQL_CACHE.. 但我不确定.. 缓存使我的过程更快.. : ( DROP
我一直在 Python 中进行套接字编程,以使用 select.select(rfile, wfile, xlist[, timeout]) 处理由已连接的客户端套接字列表发出的请求,并且我还想用 J
我试图通过用空格填充文本来创建下拉列表中的列效果,如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么,但在那种情况下没有选择的选项,我必须从列表中选择一些东西。当我从选
我的表单中有两个选择字段。第一个是单选,另一个是多选。现在我想做的是根据单选中所选的选项,使用给定的数据选择多选中的选项。为此,我在单选更改时触发 ajax 请求: $.ajax({ type
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是,我认为它可能在 Firefox 4 中工作,因为我刚买了一台新电脑,而且我不记得以前见过这个错误。 我有几个选择框。所选值
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
预选 的最佳做法是什么?在 ? 根据不同的网站,两者都有效。但是哪个更好呢?最兼容? Foo Bar 最佳答案 如果您正在编写 XHTML,则 selected="selected" 是必需的。 如
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
我在 jqGrid 中有几列 edittype="select"。如何读取特定行中当前选定值的选项值? 例如:当我提供以下选项时,如何获得 FedEx 等的“FE” editoption: { val
这是我更大问题的精简查询,但要点是我试图内部联接到一个选择,其中选择受到外部选择的限制。那可能吗?我在内部选择上收到有关多部分标识符 S.Item 和 S.SerialNum 的错误。 要点是这样的,
如果chat.chat_type IS NULL,我想选择user.*,但如果chat.chat_type = 1 我想选择组。* SELECT CASE WHEN ch
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
我正在尝试为 Prototype 编写一个插件,用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前,一切都很好。我正在使用 PHP 来使用
你如何在 MongoDB 中进行嵌套选择,类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因,它们似乎无法相提并论。。示例代码:。这段代码最终只显示空白作为缺省值。如果删除[ngValue],它就
我是一名优秀的程序员,十分优秀!