Estoy tratando de terminar el diseño, para un sistema de carga de archivos: el Sistema tiene un elemento inicial Select2
; luego se concatena con un botón de búsqueda (para buscar el archivo); luego tenemos una entrada de texto donde muestro el nombre del archivo (el campo readonly que no logro que se muestre correctamente); después de esto, necesito 3 botones: una para vista previa, otra que me permite agregar más líneas y otra que me permite eliminarlas.
pero no puedo hacer que se vea como col-sm-12
como en col-sm-6
el 80% me funciona pero no es responsive
Verifiquen el campo de entrada de texto es readonly; este tiene 80% css pero necesito que llene en todos los casos el espacio en línea a la mitad, pero no lo logro.
$(".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>