1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    104
    Vote Rating
    0
    nokia786 is on a distinguished road

      0  

    Default preventing word-wrap in textarea

    preventing word-wrap in textarea


    I have the below configuration for a textarea, while the vertical scrollbars appear as the text increases, the horizontal scrollbar does not appear as the length of a sentence increases. I do not want the word wrapping and want it to horizontally scroll. Searching documentation and forums did not help.

    Code:
         {
                xtype: 'textarea',
                name: 'inputText',
                colspan: 3,
                height: 300,
                width: 400,
                allowBlank: false
            }
    Is there something very common that I am missing here?

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    80
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I don't believe you can. Implementation of textarea differs between browsers. For instance, Fx does not word wrap while IE6/7 do.

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    3
    Vote Rating
    0
    ISkomorokh is on a distinguished road

      0  

    Cool WordWrap in TextArea

    WordWrap in TextArea


    TextArea onRender

    Code:
    wordWrap: false;
    
    ...
    
    this.el.setOverflow('auto');
            if (this.wordWrap === false) {
                if (!Ext.isIE) {
                   this.el.set({wrap:'off'})
                } else {
                  this.el.dom.wrap = "off";
                }
            }
            if (this.preventScrollbars === true) {
                this.el.setStyle("overflow", "hidden");
            }

  4. #4
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    I don't believe you can. Implementation of textarea differs between browsers. For instance, Fx does not word wrap while IE6/7 do.
    Not sure about all browsers, but you should be able to set wrap on/off and the textarea does a horizontal scroll for long lines instead of wrapping.

    The above code looks promising.

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    74
    Vote Rating
    1
    cginzel is on a distinguished road

      0  

    Default works for me!

    works for me!


    Based on the post above and this post I've created the following override to extend the TextArea and add the wordWrap option which seems to work fine for me. But so I'm putting it out there for anyone else to use and or comment on...

    Code:
    Ext.override(Ext.form.TextArea, {
    	initComponent: Ext.form.TextArea.prototype.initComponent.createSequence(function() {
    		Ext.applyIf(this, {wordWrap: true});
    	}),
    	
    	onRender: Ext.form.TextArea.prototype.onRender.createSequence(function(ct, position){ 
    		this.el.setOverflow('auto');
    		if (this.wordWrap === false) {
    			if (!Ext.isIE) {
    				this.el.set({wrap:'off'})
    			} else {
    				this.el.dom.wrap = 'off';
    			}
    		}
    		if (this.preventScrollbars === true) {
    			this.el.setStyle('overflow', 'hidden');
            }	            	
        })
    });

  6. #6
    Sencha User jagadeesha's Avatar
    Join Date
    Jan 2011
    Location
    Bangalore , Trianz
    Posts
    10
    Vote Rating
    0
    jagadeesha has a little shameless behaviour in the past

      0  

    Default


    Solution(For Ext 4 and above) would be

    textarea.inputEl.dom.wrap = "off";

    and for earlier versions

    textarea.el.dom.wrap = "off";


    Write this in the after render listener of text area .it should work.

    best of luck

  7. #7
    Sencha User nikhila.charan's Avatar
    Join Date
    Nov 2012
    Location
    TRIANZ, Bangalore
    Posts
    1
    Vote Rating
    1
    nikhila.charan is on a distinguished road

      1  

    Default


    Thanks a lot Jagadeesha It Works