0

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>

1 respuesta 1

0

al final pude encontrar el camino correcto para hacerlo responsive:

$(".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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.