How to disable textarea resize?

Navigation
12

How do I disable resize of a textarea ? 

<textarea></textarea>

I would like you not to change the size of the box ...

    
asked by anonymous 17.01.2017 / 13:41

4 answers

9

You can use the resize attribute to set this.

To disable changing the size of textarea you set this value to none : 

<textarea style="resize: none"></textarea>

There is still a way to limit resize in only one direction (or vertical, or horizontal).

Examples:

Vertical Only: 

<textarea style="resize: vertical"></textarea>

Only: Horizontal: 

<textarea style="resize: horizontal"></textarea>
    
17.01.2017 / 13:44
10

textarea {
  resize: none;
}
<textarea></textarea>
    
17.01.2017 / 13:43
8

Setting the default resize to none .

Eg: (All TextArea ) 

textarea {
  resize: none;
}
<textarea></textarea>

Eg: Defining by class 

.resize-none {
  resize: none;
}
<textarea class="resize-none"></textarea>
    
17.01.2017 / 13:44
4

The resize quer property controls how an element can be scaled by the user by clicking and dragging the lower-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><pclass="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 (en) .

    
17.01.2017 / 13:51
CSS Operators with @ How to implement a linear regression algorithm?