CODEWITHSUNDEEP
htmltextarea
Wizard
Wizard

Reputation: 11265

Turn off textarea resizing

I'm trying to turn off textarea resizing in my site; right now I'm using this method:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

I know that my method is not correct and I'm searching for a better one in JavaScript. I'm a beginner, so the best solution for me will be HTML5 or jQuery.

Upvotes: 129

Views: 226582

Answers (8)

kstepien
kstepien

Reputation: 1233

This is works for me

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>

Upvotes: 6

Darlesson
Darlesson

Reputation: 6162

Just one extra option, if you want to revert the default behaviour for all textareas in the application, you could add the following to your CSS:

textarea:not([resize="true"]) {
  resize: none !important;
}

And do the following to enable where you want resizing:

<textarea resize="true"></textarea>

Have in mind this solution might not work in all browsers you may want to support. You can check the list of support for resize here: http://caniuse.com/#feat=css-resize

Upvotes: 3

Manoj
Manoj

Reputation: 2216

As per the question, i have listed the answers in javascript

By Selecting TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

By Selecting Id

document.getElementById('textArea').style.resize = "none";

Upvotes: 1

nobody
nobody

Reputation: 1

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

above code works on most browsers

//HTML:
<textarea id='textarea' draggable='false'></textarea>

do both for it to work on the maximum number of browsers

Upvotes: 0

Oriol
Oriol

Reputation: 12650

CSS3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For IE 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

Upvotes: 9

Thusitha Wickramasinghe
Thusitha Wickramasinghe

Reputation: 1103

It can done easy by just using html draggable attribute

<textarea name="mytextarea" draggable="false"></textarea>

Default value is true.

Upvotes: -1

feco
feco

Reputation: 4424

Try this CSS to disable resizing

The CSS to disable resizing for all textareas looks like this:

textarea {
    resize: none;
}

You could instead just assign it to a single textarea by name (where the textarea HTML is ):

textarea[name=foo] {
    resize: none;
}

Or by id (where the textarea HTML is ):

#foo {
    resize: none;
}

Taken from: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

Upvotes: 281

Rab
Rab

Reputation: 35572

this will do your job 

  textarea{
        resize:none;
    }

enter image description here

Upvotes: 23

Related Questions