Make textarea occupy 100% of the width

Question

Make textarea occupy 100% of the width

Navigation

#1 by (1 votes)
#2 by (0 votes)

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>

The issue is that I want the textarea to take the width of the div with the container class, so it occupies the full width. I have tested the width property; 100%, and do not take it.

html css3 bootstrap

asked by Stewie 09.11.2018 в 18:43

source

2 answers

0

Add min-width: 100% to textarea style.

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

answered by 09.11.2018 в 18:46

library does not work: leafletjs Uncaught Error: Can not find module "leaflet" ionic 3? Take the ID of a record in a PHP table with JS

score 1 · Accepted Answer

You are using Bootstrap, so just change the <div class="col-lg-8"> by <div class="col-lg-12"> and the textarea add the class form-control as I leave you in the example, the first textarea is as you have it in your example, the second is the modified one to use 100% of the 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>