How do I disable the resizable property of a textarea

Question

I want to disable the resizable property of a textarea   Currently  I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse  How can I disable this

User · Answer

You can try with jQuery also     textarea   css  resize    none

User · Answer

You 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 nbsp Explorer  at the moment   Here are different properties for resize   No Resize   textarea     resize  none      Resize both ways  vertically  amp  horizontally    textarea     resize  both      Resize vertically   textarea     resize  vertical      Resize horizontally   textarea     resize  horizontal      Also if you have width and height in your CSS or HTML  it will prevent your textarea be resized  with a broader browsers support

User · Answer

Adding  important makes it work   width 325px  important  height 120px  important  outline none  important    outline is just to avoid the blue outline on certain browsers

User · Answer

To disable resize for all textareas   textarea       resize  none      To disable resize for a specific textarea  add an attribute  name  or an id and set it to something  In this case  it is named noresize  HTML   lt textarea name  noresize  id  noresize  gt   lt  textarea gt    CSS     Using the attribute name    textarea name noresize        resize  none       Or using the id      noresize       resize  none

User · Answer

lt textarea style  resize none  rows  10  placeholder  Enter Text   gt  lt  textarea gt

User · Answer

You can simply disable the textarea property like this   textarea       resize  none      To disable vertical or horizontal resizing  use  resize  vertical    or  resize  horizontal

User · Answer

To disable the resize property  use the following CSS property   resize  none     You can either apply this as an inline style property like so    lt textarea style  resize  none   gt  lt  textarea gt   or in between  lt style gt     lt  style gt  element tags like so   textarea       resize  none

User · Answer

I 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  lt  DOCTYPE html gt   lt html gt   lt head gt   lt  head gt   lt body gt       lt textarea style  quot overflow auto resize none quot  rows  quot 13 quot  cols  quot 20 quot  gt  lt  textarea gt   lt  body gt   lt  html gt   Some browsers  Internet  Explorer  8    Firefox 17 0 1    Chrome

User · Answer

I have created a small demo to show how resize properties work  I hope it will help you and others as well    x000D   x000D   resizeable   x000D    resize  both  x000D    x000D   x000D   noResizeable   x000D    resize  none  x000D    x000D   x000D   resizeable V   x000D    resize  vertical  x000D    x000D   x000D   resizeable H   x000D    resize  horizontal  x000D    x000D   lt textarea class  resizeable  rows  5  cols  20  name  resizeable  title  This is Resizable   gt  x000D  This is Resizable  Lorem ipsum  or lipsum as it is sometimes known  is dummy text used in laying out print  graphic or web designs  The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero s De Finibus Bonorum et Malorum for use in a type specimen book  x000D   lt  textarea gt  x000D   x000D   lt textarea class  noResizeable  rows  5  title  This will not Resizable    cols  20  name  resizeable  gt  x000D  This will not Resizable  Lorem ipsum  or lipsum as it is sometimes known  is dummy text used in laying out print  graphic or web designs  The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero s De Finibus Bonorum et Malorum for use in a type specimen book  x000D   lt  textarea gt  x000D   x000D   lt textarea class  resizeable V  title  This is Vertically Resizable   rows  5  cols  20  name  resizeable  gt  x000D  This is Vertically Resizable  Lorem ipsum  or lipsum as it is sometimes known  is dummy text used in laying out print  graphic or web designs  The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero s De Finibus Bonorum et Malorum for use in a type specimen book  x000D   lt  textarea gt  x000D   x000D   lt textarea class  resizeable H  title  This is Horizontally Resizable   rows  5  cols  20  name  resizeable  gt  x000D  This is Horizontally Resizable  Lorem ipsum  or lipsum as it is sometimes known  is dummy text used in laying out print  graphic or web designs  The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero s De Finibus Bonorum et Malorum for use in a type specimen book  x000D   lt  textarea gt  x000D   x000D   x000D

User · Answer

CSS nbsp 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 nbsp 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

User · Answer

In CSS      textarea       resize  none

User · Answer

This can be done in HTML easily    lt textarea name  textinput  draggable  false  gt  lt  textarea gt    This works for me  The default value is true for the draggable attribute

User · Answer

The following CSS rule disables resizing behavior for textarea elements   textarea     resize  none      To disable it for some  but not all  textareas  there are a couple of options   To disable a specific textarea with the name attribute set to foo  i e    lt textarea name  foo  gt  lt  textarea gt     textarea name foo      resize  none      Or  using an id attribute  i e    lt textarea id  foo  gt  lt  textarea gt      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

User · Answer

With  style  you can give it a custom size and disable the resize feature  resize  none      Html TextAreaFor model   gt  model YourProperty  new    style    width  90   height  180px  resize  none

User · Answer

CSS nbsp 3 can solve this problem  Unfortunately it s only supported on 60  of used browsers nowadays   For Internet nbsp Explorer and iOS you can t turn off resizing  but you can limit the textarea dimension by setting its width and height      One can also turn on off specific axis  Defaults to both on     textarea   resize vertical       none horizontal vertical both      See Demo

User · Answer

If 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

User · Answer

In reactjs  you can disable the resize widget using style props   lt textarea id   quot multiline-id quot   ref   my-ref   style   resize   quot none quot    className  quot text-area-additional-styles quot    gt

[html] How do I disable the resizable property of a textarea?

Examples related to html

Examples related to css