使用Select2和其他表单控件元素或input-group-btn

时间：2018-05-26 07:13:30

标签： javascript html css twitter-bootstrap jquery-select2

我试图完成设计，对于文件上传系统： 系统有一个初始选择2;然后它与搜索按钮连接（搜索文件）;然后我们有一个输入文本，我显示文件名;在此之后，我需要3个按钮：一个预览，另一个允许我添加更多行，另一个允许我删除它们。

但我不能像col-sm-6那样使它看起来像col-sm-12

＆＃13;
＆＃13; 
$(".select2").select2({
		theme: "bootstrap",
		placeholder: "Buscar y Selecionar",
		allowClear: true,
	});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

检查中间只读的输入文字;这有80％，但我需要在中间填充所有实例中的空格。

2 个答案:

答案 0 :(得分：0)

我找到了解决问题的方法

IN BS 3.X：

＆＃13;
＆＃13; 
$(".select2").select2({
		theme: "bootstrap",
		placeholder: "Buscar y Selecionar",
		width: 'auto',
		dropdownAutoWidth: true,
		allowClear: true,
	});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

IN BS 4.X： 用于动态初始化select2的自定义脚本

＆＃13;
＆＃13; 
	$('select').each(function () {
		$(this).off('change');
		$(this).select2({
			theme: 'bootstrap4',
			placeholder: "Buscar y Selecionar",
			width: 'auto',
			dropdownAutoWidth: true,
		});
	});
＆＃13; 
.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;
}
＆＃13; 
<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&nbsp;&nbsp;<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>
＆＃13;
＆＃13;
＆＃13;

对于工作添加，请删除文件事件与我联系。

答案 1 :(得分：0)

当选择在输入组中时，此css从溢出文本中修复我的select2：

.select2-container {
position:absolute;
}

相关问题
最新问题