web-dev-qa-db-fra.com

Largeur maximale de la zone de texte

J'ai un problème avec textarea max-width, j'ai besoin qu'elle ne dépasse pas . Table-cell.two width une fois redimensionnée, sur cet exemple:

exemple JSfiddle

HTML: 

<div class="wrapper">
<div class="table">
    <div class="table-cell one">
        <p>small cell</p>
    </div>
    <div class="table-cell two">
        <p>textarea cell</p>
        <textarea></textarea>
    </div>
</div>

CSS: 

textarea {
  max-width: 100%;
}

.wrapper {
  width: 500px;
}

.table {
  display: block;
  width: 100%;
}

.table-cell {
  display: table-cell;
  background: #E2D8C1;
  vertical-align: top;
  padding: 10px;
}

.table-cell.two {
  width: 100%;
  background: #DAC082;
}

.table textarea {
  max-width: 100%;
  width: 100%;
  height: 100px
}

Veuillez ne pas conseiller l'utilisation de javascript, il fallait une pure solution css.

htmlcsstextarea
20
no1lov3sme

Utilisation:

textarea { 
   /* will prevent resizing horizontally */
   resize:vertical;
}
54
Bhojendra Rauniyar

J'ai aussi ce problème. La solution est très simple mais je passe quelques heures pour des expériences ... Utilisez ces deux paramètres en même temps dans la définition de style d'élément textarea classe/# élément (90% 30% sont des valeurs d'exemple):

.textarea {
    width:90%;
    max-width:90%;
    max-height:30%;
}
5
user6297197

Par défaut, la zone de texte est redimensionnable. Si vous souhaitez augmenter la largeur de l'élément, vous pouvez le faire en

HTML

<textarea rows="4" cols="50">Content here</textarea>

CSS

max-width: 300px;
max-height:300px

Démo sur jsfiddle

Dans votre cas, vous souhaitez corriger le <textarea> taille lorsque le parent n'a pas de taille fixe.

3
Naveen - நவீன்

Pour la zone de texte, vous pouvez définir

<textarea rows="5"></textarea>

et en css

textarea { height: auto; }
0
AVM