how to set minimum Heigth in dijit.form.Textarea

[UPDATE]: rather than using below code, simply use css min-height property. Styling with ‘height’ does not work since dojo changes it dynamically, but min-height works great (too bad for IE6 users, but it’s time to update guys!).

**************************************

With v.1.3.1, dojo comes with a really nice feature on textarea form. They automatically expand while user is writting.

While this feature is great, it’s pittyful that for now, no option exists to prevent box resizing upon creation.
Therefore your textarea looks like a single line <input type=”text”> node and user simply has no idea that he can write a lot of stuff in it.

I subclassed the dijit to add a ‘skipResizeUponCreation’ option as defined below.
That way your textarea looks like a multi-line box and user knows he can write multiple line content.

/*
* Extends dijit.form.textarea to conditionally prevent height resizing upon instanciation
*/
dojo.provide('fenv.widgets.Textarea');
dojo.require('dijit.form.Textarea');

dojo.declare(
 'fenv.widgets.Textarea',
 dijit.form.Textarea,
 {
  skipResizeUponCreate: null,
  _rdFirstCall: true,

  resize: function(){
   // summary:
   //   skip call of parent resize() if called upon creation and this.skipResizeUponCreate is true
    if (!this._rdFirstCall || !this.skipResizeUponCreate) {
     this._rdFirstCall = false;
    return this.inherited(arguments);
   }
  }
 }
);

Screenshot
Textarea has not been resized upon instanciation, keeps its ‘expand-ad-you-type’ feature and user is aware of it being a multiline box.
=> best of both worlds.

Dont forget to use dojo.registerModulePath(); to link fenv.widgets (or whatever name you give him) to its url path.

sources

2 Comments: Trackback URL | Comments RSS

  1. ashutosh Says:

    use CSS class .dijitTextarea[rows] { height:200px; }
  2. Abhishek Says:

    This is cool!! Works great!!

Post a Comment

Your email is never published nor shared. You're allow to say what you want...