- This topic is empty.
-
AuthorPosts
-
March 8, 2011 at 11:15 am #9092David HoangKeymasterMarch 8, 2011 at 11:17 am #9114David HoangKeymaster
The following CSS rule disables resizing behavior for
textarea
elements:textarea { resize: none; }
To disable it for some (but not all)
textarea
s, there are a couple of options.You can use
class
attribute in your tag(<textarea class="textarea1">
):.textarea1 { resize: none; }
To disable a specific
textarea
with thename
attribute set tofoo
(i.e.,<textarea name="foo"></textarea>
):textarea[name=foo] { resize: none; }
Or, using an
id
attribute (i.e.,<textarea id="foo"></textarea>
):#foo { resize: none; }
The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:
textarea { resize: vertical; /* user can resize vertically, but width is fixed */ }
Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.
Super important to know:
This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you’ll have to set something like overflow: scroll;
Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/March 8, 2011 at 11:17 am #9113David HoangKeymasterIn CSS:
textarea { resize: none; }
March 8, 2011 at 11:35 am #9111David HoangKeymasterCSS 3 has a new property for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:
textarea { resize: none; }
This is a CSS 3 property; use a compatibility chart to see browser compatibility.
Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to “break” the user’s client. If your design can’t accommodate a larger textarea, you might want to reconsider how your design works. Any user can add
textarea { resize: both !important; }
to their user stylesheet to override your preference.December 28, 2012 at 3:58 am #9112David HoangKeymasterI found two things:
First
textarea{resize: none}
This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.
Another format feature is to
overflow: auto
to get rid of the right scrollbar, taking into account the dir attribute.Code and different browsers
Basic HTML
<!DOCTYPE html> <html> <head> </head> <body> <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea> </body> </html>
Some browsers
- Internet Explorer 8
- Firefox 17.0.1
- Chrome
November 6, 2013 at 4:19 am #9110David HoangKeymaster<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
February 4, 2014 at 2:07 am #9094David HoangKeymasterAdding
!important
makes it work:width:325px !important; height:120px !important; outline:none !important;
outline
is just to avoid the blue outline on certain browsers.February 12, 2015 at 7:14 am #9109David HoangKeymasterIf you need deep support, you can use an old school technique:
textarea { max-width: /* desired fixed width */ px; min-width: /* desired fixed width */ px; min-height: /* desired fixed height */ px; max-height: /* desired fixed height */ px; resize: none; /* If you wnt to hide the handle in the lower right corner */; }
July 21, 2015 at 12:18 pm #9108David HoangKeymasterThis can be done in HTML easily:
<textarea name="textinput" draggable="false"></textarea>
This works for me. The default value is
true
for thedraggable
attribute.October 31, 2015 at 6:26 am #9099David HoangKeymasterCSS 3 can solve this problem. Unfortunately it’s only supported on 60% of used browsers nowadays.
For Internet Explorer and iOS you can’t turn off resizing, but you can limit the
textarea
dimension by setting itswidth
andheight
./* One can also turn on/off specific axis. Defaults to both on. */ textarea { resize:vertical; } /* none|horizontal|vertical|both */
June 12, 2016 at 5:43 am #9103David HoangKeymasterTo disable the resize property, use the following CSS property:
resize: none;
-
You can either apply this as an inline style property like so:
<textarea style="resize: none;"></textarea>
-
or in between
<style>...</style>
element tags like so:textarea { resize: none; }
October 25, 2016 at 3:19 am #9100David HoangKeymasterTo disable resize for all
textarea
s:textarea { resize: none; }
To disable resize for a specific
textarea
, add an attribute,name
, or anid
and set it to something. In this case, it is namednoresize
HTML
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* Using the attribute name */ textarea[name=noresize] { resize: none; } /* Or using the id */ #noresize { resize: none; }
December 15, 2016 at 3:08 am #9096David HoangKeymasterYou can try with jQuery also
$('textarea').css("resize", "none");
June 1, 2017 at 8:11 am #9107David HoangKeymasterYou simply use:
resize: none;
in your CSS.The resize property specifies whether or not an element is resizable
by the user.Note: The resize property applies to elements whose computed overflow
value is something other than "visible".Also resize not supported in Internet Explorer at the moment.
Here are different properties for resize:
No Resize:
textarea { resize: none; }
Resize both ways (vertically & horizontally):
textarea { resize: both; }
Resize vertically:
textarea { resize: vertical; }
Resize horizontally:
textarea { resize: horizontal; }
Also if you have
width
andheight
in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.May 28, 2018 at 2:09 am #9104David HoangKeymasterYou can simply disable the textarea property like this:
textarea { resize: none; }
To disable vertical or horizontal resizing, use
resize: vertical;
or
resize: horizontal;
-
AuthorPosts
- You must be logged in to reply to this topic.