4

Como puedo organizar mi formulario, estoy utilizando bootstrap pero no puedo organizar el campo descripción que es un textarea debajo de los otros dos inputtext

introducir la descripción de la imagen aquí

Este es el codigo que estoy utilizando

<form>
        <div class="form-row">
            <div class="form-group col-md-4">
                <?= $form->field($model, 'idArea')->textInput(['maxlength' => true]) ?>
            </div>
            <div class="form-group col-md-4">
                <?= $form->field($model, 'Nombre')->textInput(['maxlength' => true]) ?>
            </div>
        </div>

        <div class="form-row">
            <?= $form->field($model, 'Descripcion')->textarea(['maxlength' => true, 'style' => 'width:40%']) ?>
        </div>
    </form>
4
  • La estoy utilizando con Yii2 es bootstrap 2.0.7
    – John Doe
    Commented el 12 mar. 2018 a las 3:51
  • Hiciste una edición a la pregunta y cambiaste TOTALMENTE el problema planteado inicialmente.
    – Shaz
    Commented el 12 mar. 2018 a las 4:13
  • El problema que planteaste era que no podías alinear el textarea debajo de los dos input. Una vez solucionado (con el código que proporcioné), si tienes un nuevo problema, puedes formular una nueva pregunta.
    – Shaz
    Commented el 12 mar. 2018 a las 4:17
  • Continuemos el debate en el chat.
    – John Doe
    Commented el 12 mar. 2018 a las 4:21

1 respuesta 1

4

Si entiendo bien el problema:

no puedo organizar el campo descripción que es un textarea debajo de los otros dos inputtext

Entonces para ponerlo debajo de los dos input y que ocupe "todo el ancho" tienes varias opciones:

  1. Utiliza la clase col en cada elemento de la fila:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <form>
      <div class="form-row">
        <div class="col">
          <label for="exampleInput1">First name</label>
          <input type="text" class="form-control" id="exampleInput1" placeholder="First name">
        </div>
        <div class="col">
          <label for="exampleInput2">Last name</label>
          <input type="text" class="form-control"  id="exampleInput2" placeholder="Last name">
        </div>
      </div>
      <div class="form-row">
        <div class="col">
          <label for="exampleFormControlTextarea1">Example textarea</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
      </div>
    </form>

  2. Utiliza la sintaxis típica de la grilla de 12 columnas:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <form>
      <div class="form-row">
        <div class="col-xs-12 col-sm-6">
          <label for="exampleInput1">First name</label>
          <input type="text" class="form-control" id="exampleInput1" placeholder="First name">
        </div>
        <div class="col-xs-12 col-sm-6">
          <label for="exampleInput2">Last name</label>
          <input type="text" class="form-control"  id="exampleInput2" placeholder="Last name">
        </div>
      </div>
      <div class="form-row">
        <div class="col">
          <label for="exampleFormControlTextarea1">Example textarea</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
      </div>
    </form>

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.