18
How do I disable resize
of a textarea
?
<textarea></textarea>
I wish I couldn’t change the size of the box...
18
How do I disable resize
of a textarea
?
<textarea></textarea>
I wish I couldn’t change the size of the box...
23
You can use the attribute resize
to define this.
To disable changing the size of textarea
you set this value to none
:
<textarea style="resize: none"></textarea>
There’s still a way to limit the resize
in only one direction (or vertical, or horizontal).
Examples:
Vertical only:
<textarea style="resize: vertical"></textarea>
Only: Horizontal:
<textarea style="resize: horizontal"></textarea>
12
textarea {
resize: none;
}
<textarea></textarea>
9
Setting ownership resize
for none
.
Ex.: (All TextArea
)
textarea {
resize: none;
}
<textarea></textarea>
Ex.: Defining by class
.resize-none {
resize: none;
}
<textarea class="resize-none"></textarea>
4
The estate resize
controls how an element can be resized by the user by clicking and dragging the bottom right corner of the element.
$('button').on('click', function() {
$('p').css('resize', $(this).text());
});
body {
background-color: #1D1F1F;
}
section {
width: 50%;
margin: 0 auto;
}
p {
width: 100%;
height: 5em;
background-color: white;
padding: .5em;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<button>both</button>
<button>horizontal</button>
<button>vertical</button>
<button>none</button>
<p class="resize">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue. In sed dui placerat nisl cursus aliquet. Integer nisl lorem, maximus et viverra non, aliquet vel arcu. Cras ullamcorper, arcu id molestie scelerisque, est turpis interdum mauris, sit amet pretium mi lectus at metus. Phasellus ornare odio in ipsum faucibus, et tempus est porttitor. Nullam sollicitudin eleifend mi at semper. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue.</p>
</section>
See more details here in this article.
Another almost equal answer... with jQuery still.
@Diegosouza jquery is just to see working in real time. You tried to run?
Yes. It doesn’t work.
@Diegosouza how not?! Works perfectly here.
@Magichat then, I put jQuery only to better view, to be able to run and see in real time run with snippet. In this excerpt $('p').css('resize', $(this).text())
the attribute of the textarea
on the average you click the buttons,(Both, horizontal, vertical and None);
@Magichat do not know why rays, but here works and will work also the use of properties (Both, horizontal, vertical and None) in practice, because wanting or not, the answer resembles (indifferent) others of this your question, but showing the 4 cases in the snippet. ^^
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
As a curiosity: to resize both sides, use
resize: both
– Wallace Maxters