1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
    G_D is on a distinguished road

      0  

    Default Unanswered: Sencha Touch TextAreaField set height according to content

    Unanswered: Sencha Touch TextAreaField set height according to content


    Hi everybody,

    does anybody know how to configure the TextAreaField so that it's height is adjustet to it's content? Alternatively It would be ok if the content is scrollable

    Carlo

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There is a bug in textarea scrolling that we have to overcome still.

    There is no built-in way to make the textarea grow with content, this is something you will need to do with a keyup listener.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    68
    Vote Rating
    -1
    jairok is an unknown quantity at this point

      0  

    Default


    Any news about a fix ?

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Westbrook, ME
    Posts
    116
    Vote Rating
    3
    sfpc2770 is on a distinguished road

      1  

    Default Override TextArea to set height in IOS

    Override TextArea to set height in IOS


    I was able to get this to work with following code in ST 2.0.1 I modeled it after a similar fix I saw for ST 1.0

    It works nicely on the ipad. The only issue I've found is when you originally populate the text area, if its not visible (rendered?), the scrollHeight comes back as 0. Resulting in text area originally not fitting content, but popping out to correct size if user types in it. I'll attempt to tackle that one later.

    A co-worker here took the path of listening for two-finger scrolling, and scrolling the text manually.

    -Sean

    Code:
    Ext.override(Ext.form.TextArea, {
    
    
        adjustHeight: Ext.Function.createBuffered(function(textarea){
            var textAreaEl = textarea.getComponent().input;
            if (textAreaEl) {
                textAreaEl.dom.style.height = 'auto';
                textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
            }
    
    
        },200,this),
    
    
        constructor: function() {
            this.callParent(arguments);
    
    
            this.on({
                scope: this,
                keyup: function (textarea) {
                    textarea.adjustHeight(textarea);
                },
                change: function(textarea, newValue) {
                    textarea.adjustHeight(textarea);
                }
            });
        }
    });

  5. #5
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Nice one Sean I look forward to your update with adjusting before displaying.

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Westbrook, ME
    Posts
    116
    Vote Rating
    3
    sfpc2770 is on a distinguished road

      2  

    Default Final solution for this one

    Final solution for this one


    Here's my final solution for this one, including setting the height correctly when initially the TextArea isn't shown, so has a height of zero even when the text in it is large.

    Enjoy,
    -Sean


    Code:
    Ext.override(Ext.form.TextArea, {
    
        constructor: function() {
            this.callParent(arguments);
    
    
            this.adjustHeight = Ext.Function.createBuffered(function(textarea) {
                var textAreaEl = textarea.getComponent().input;
                if (textAreaEl) {
                    textAreaEl.dom.style.height = 'auto';
                    textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
                }
    
    
            },200,this);
    
    
            this.on({
                scope: this,
                keyup: function (textarea) {
                    textarea.adjustHeight(textarea);
                },
                change: function(textarea, newValue) {
                    textarea.adjustHeight(textarea);
                },
                painted: function(textarea) {
                    textarea.adjustHeight(textarea);
                }
            });
        }
    });

  7. #7
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Works great for me. Thanks

    Is it the same if its

    Ext.override('Ext.form.TextArea' , { ... });

    or

    Ext.form.TextArea.override({ ... });

    I'm assuming so.

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Westbrook, ME
    Posts
    116
    Vote Rating
    3
    sfpc2770 is on a distinguished road

      0  

    Default


    Haven't done a lot with overrides so far, but using both forms currently. Those, as well as
    override : 'Ext.field.TextArea'

    Glad to help,
    -Sean

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Location
    Paris
    Posts
    29
    Answers
    1
    Vote Rating
    4
    ronan quillevere is on a distinguished road

      1  

    Default


    Thanks for the code it saved me some time ! I used it this way : I extended the classic TextArea and created a new xtype then I used that xtype in my form.

    Code:
    Ext.define('MyAPP.field.AutoHeightTextArea', { 
        extend: 'Ext.field.TextArea',
        xtype : 'autoHeightTextArea',
        
        constructor: function() {
            this.callParent(arguments);
    
            this.adjustHeight = Ext.Function.createBuffered(function(textarea) {
                var textAreaEl = textarea.getComponent().input;
                if (textAreaEl) {
                    textAreaEl.dom.style.height = 'auto';
                    textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
                }
            },200,this);
    
            this.on({
                scope: this,
                keyup: function (textarea) {
                    textarea.adjustHeight(textarea);
                },
                change: function(textarea, newValue) {
                    textarea.adjustHeight(textarea);
                },
                painted: function(textarea) {
                    textarea.adjustHeight(textarea);
                }
            });
        }
    });
    In addition to that I set
    Code:
    maxRows: 1
    for the autoHeightTextArea fields and I override the css of x-field-textarea in my app.scss

    Code:
    .mycssforfield.x-field-textarea textarea {
      min-height: 0.8em;
    }
    This way the height of my text area is similar to a textfield (I use labelAlign : "top" so I haven't tested it with align left).

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Location
    Berlin
    Posts
    45
    Answers
    2
    Vote Rating
    2
    diractor is on a distinguished road

      0  

    Default Works!

    Works!


    Thanks for the nice example! It is working perfectly for me.