I am trying to finish the design, for a file loading system: the System has an initial element Select2 ; then it is concatenated with a search button (to search for the file); then we have a text entry where I show the name of the file (the readonly field that I can not show correctly); after this, I need 3 buttons: one for preview, another that allows me to add more lines and another that allows me to delete them.
but I can not make it look like col-sm-12 as in col-sm-6
80% works for me but it's not responsive
Check the text entry field is readonly; this one has 80% css but I need to fill in all cases the online space in half, but I do not achieve it.
$(".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>