1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group" style="width: 100%;">
        <label class="col-lg-3 control-label">Mensaje:</label>
        <div class="col-lg-8">
          <textarea name="contenido" id="contenido" rows="4" cols="50" placeholder="Escribe tu mensaje aquí" style="background-color: white;"></textarea>
        </div>
    </div>
    </div>

El tema es que quiero que el textarea coja el ancho respecto al div con la clase container,o sea que ocupe todo el ancho. He probado la propiedad width; 100% , y no me lo coge.

0

3 respuestas 3

3

Estas utilizando Bootstrap, así que solo cambia el <div class="col-lg-8"> por <div class="col-lg-12"> y a el textarea agrégale la clase form-control como te dejo en el ejemplo, el primer textarea es como lo tienes en tu ejemplo, el segundo es el modificado para que utilice el 100% del div.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
  <div class="form-group" style="width: 100%;">
    <label class="col-lg-3 control-label">Mensaje:</label>
    <div class="col-lg-8">
      <textarea name="contenido" id="contenido" rows="4" cols="50" placeholder="Escribe tu mensaje aquí" style="background-color: white;"></textarea>
    </div>
  </div>
</div>

<div class="container">
  <div class="form-group" style="width: 100%;">
    <label class="col-lg-3 control-label">Mensaje:</label>
    <div class="col-lg-12">
      <textarea name="contenido" id="contenido" class="form-control" rows="4" cols="50" placeholder="Escribe tu mensaje aquí" style="background-color: white;"></textarea>
    </div>
  </div>
</div>

1

Agrega min-width: 100% al style del textarea.

<textarea style="min-width: 100%"></textarea>
0

Intenta poniendo ambos parámetros.

<textarea style="min-width: 100%; width: 100%"></textarea>

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.