0

Hola estoy diseñando un pequeño formulario con un div, pero cuando lo ejecuto se descuadra, lo que quiero es que el TEXAREA Observacion tenga el tamano de los dos INPUT, como ven el input TURNO esta muy abajo lo quiero poner mas arriba y que el text area tenga el mismo tamaño que los dos juntos introducir la descripción de la imagen aquí

aqui mi codigo

//Incluido para fines de ejecución en stack-snippet
document.getElementById('fecha').value = new Date().toLocaleDateString("es-MX",{day:"2-digit", month:"2-digit", year:"numeric"}).replace(/\//g,"-");
<div class="form-group">
  <div class="col-md-6">
    <label class="col-xs-6">Fecha</label>
    <input id="fecha" name="fecha" value="<?php echo date('d-m-Y'); ?>" data-date-format="dd-mm-yyyy" class="form-control datepicker">
    <span class="help-block"></span>
  </div>
  <div class="col-md-6">
    <label class="col-xs-6">Observación</label>
    <textarea rows="3" cols="50" id="observacion" name="observacion" class="form-control"> </textarea>
    <span class="help-block"></span>
  </div>
  <div class="col-sm-6" align="left">
    <label class="col-xs-6">Turno</label>
    <select class="form-control" id="turno">
        <option value="">Seleccione el turno</option>
        <option value="MAÑANA">Mañana</option>
        <option value="TARDE">Tarde</option>
        <option value="NOCHE">Noche</option>
    </select>
    <span class="help-block"></span>
  </div>
</div>

2
  • ¿Tendrás tu archivo o código css donde estés dándole el formato al textarea?
    – Yikarus
    Commented el 3 may. 2017 a las 15:15
  • deberias aclarar que usas bootstrap y mejorar la redacción, no queda clara la pregunta
    – Rene Limon
    Commented el 3 may. 2017 a las 15:16

3 respuestas 3

1

Pon en misma columna los campos que quieres a la izq y luego ajusta la altura del textarea. Así quedaría con tu código.

//Incluido para fines de damostración
document.getElementById('fecha').value = new Date().toLocaleDateString("es-MX", {
  day: "2-digit",
  month: "2-digit",
  year: "numeric"
}).replace(/\//g, "-");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
  <label class="col-xs-6">Fecha</label>
  <input id="fecha" name="fecha" value="<?php echo date('d-m-Y'); ?>" data-date-format="dd-mm-yyyy" class="form-control datepicker">
  <span class="help-block"></span>
  <label class="col-xs-6">Turno</label>
  <select class="form-control" id="turno">
           <option value="">Seleccione el turno</option>
           <option value="MAÑANA">Mañana</option>
           <option value="TARDE">Tarde</option>
           <option value="NOCHE">Noche</option>
        </select>
  <span class="help-block"></span>
</div>
<div class="col-md-6">
  <label class="col-xs-6">Observación</label>
  <textarea rows="3" cols="50" id="observacion" name="observacion" class="form-control"> </textarea>
  <span class="help-block"></span>
</div>

2
  • Carmen: Me tomé la libertad de pasar tu código a stack-snippet. Me parece que ayuda. Nota: Para ver el efecto buscado, haya que hacer clic e "Ampliar" / "Página completa"
    – Rubén
    Commented el 3 may. 2017 a las 15:44
  • 1
    Toda mejora es bienvenida Rubén. Gracias.
    – Carmen
    Commented el 3 may. 2017 a las 15:54
1

Si el limite de columnas es 12 puedes observar que ya con el div de la fecha y el de observación estas completando las 12 columnas debes crear un div:

<div class="col-md-6">
  <!--aquí los 2 divs que compartirán el mismo espacio -->
</div>
<div class="col-md-6">
  <!--aquí iría el de observación -->
</div>

Aqui quedaria como lo quieres

0

Deberías echarle un vistazo al sistema de grid de bootstrap.

Bootstrap divide el ancho de la pantalla en 12 columnas si quieres que la fecha y el turno ocupen la mitad deberás asignarles 6 columnas. Y al textarea que quieres que ocupe el ancho completo asignarle las 12 columnas.

Échale un vistazo a este ejemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">                                    
	<div class="col-md-6">
		<label class="col-xs-6">Fecha</label>
		<input id="fecha" name="fecha" value="<?php echo date('d-m-Y'); ?>" data-date-format="dd-mm-yyyy" class="form-control datepicker">
		<span class="help-block"></span>
	</div>                                    
	<div class="col-md-6" align="left">
		<label class="col-xs-6">Turno</label>
		<select class="form-control" id="turno" >
			<option value="">Seleccione el turno</option>
			<option value="MAÑANA">Mañana</option>
			<option value="TARDE">Tarde</option>
			<option value="NOCHE">Noche</option>
		</select>
		<span class="help-block"></span>
	</div>
	<div class="col-md-12">
		<label class="col-xs-6">Observación</label>
		<textarea rows="3" cols="50" id="observacion" name="observacion" class="form-control"> </textarea>
		<span class="help-block"></span>
	</div>
</div>

2
  • Aunque la pregunta no es del todo clara, a mí me parece que el OP se refiere a que Observación tenga la misma altura que los otros dos inputs juntos.
    – Rubén
    Commented el 3 may. 2017 a las 15:37
  • Sí, tienes razón. Le había entendido mal Commented el 3 may. 2017 a las 15:42

Tu Respuesta

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

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