Reputation: 742
I'm having problem with textarea max-width, I need it to not exceed .table-cell.two width when resized, on this example:
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
}
Please do not advise using javascript, needed a pure css solution.
Upvotes: 37
Views: 95752
Reputation: 85643
Use:
textarea {
/* will prevent resizing horizontally */
resize:vertical;
}
Upvotes: 87
Reputation: 81
I have this problem too. The solution is very simple but i spend few hours for experiments... Use this two parameters at the same time in textarea element class/#element style definition (90% 30% are example values) :
.textarea {
width:90%;
max-width:90%;
max-height:30%;
}
Upvotes: 8
Reputation: 411
For default the text area is re sizable. If you want to increase the element width, you can do it by
<textarea rows="4" cols="50">Content here</textarea>
max-width: 300px;
max-height:300px
Demo on jsfiddle
In your case you want to fix the <textarea>
size when the parent does not have a fixed size.
Upvotes: 3
Reputation: 592
For textarea you can set
<textarea rows="5"></textarea>
and in css
textarea { height: auto; }
Upvotes: 0