We are experiencing an issue in IE: elastic/kibana#4048

Basically, IE sets the scrollHeight of an empty textbox to 0 rather than the line height, but will return the proper height if the value is even just a space (new lines didn't seem to work). So, we set config.append = ' '; and called it a day. It may make sense to fix this in the library though.

app.config(['msdElasticConfig', function(config) {
  config.append = ' ';
}])

Whenever i repeat data that comes from the backend with a promise, the height of the textarea is just being blown out of proportion. I'm talking one line of text with a height of 974px. So i've fixed this temporarily by forcing angular-elastic to execute forceAdjust(); whenever the var heightValue is not NaN because that is what's being returned the first couple of times by angular-elastic.

This is probably not the best solution so i would like to hear from you guys if you have any ideas to fix this. Sadly this only happens in safari so i'm not entirely sure why it is happening. Also i'm gonna try to fix a plunker so i hope that i can reproduce the problem.

I would like to change the font-size dynamically, is there any solution to tell angular-elastic to do resizing ?

<textarea ng-style="{'font-size':item.fontSize + 'px','line-height':item.fontSize *1.2 + 'px'}"  ng-model="item.content" msd-elastic ></textarea>

First of all, thanks for your work. This directive was exactly what I needed. I was looking in the documentation and under the issues section for ways to listen on resize, but couldn't find anything. So I would just suggest that you put a description about the name of the event in your documentation:

$rootScope.$on('elastic:resize', function(){ // Some actions })

Max-height only works if the style is inlined. if applying a class to the textarea element it will not work!

Hi there,

it would be nice if this project could be published under an open source license.

Thanks!
Max

Firefox 25.0/mozilla21 - 1.0

Steps to reproduce:

1. Modify the index.html provided with the library to add an id to one of the textareas -
   <textarea data-msd-elastic id="first" data-ng-model="foo"></textarea>
2. Add a css directive to the style block on that page that modifies the font size -

first{

  font-size: 32px;
}

3. Observe the page with Firefox, note that resizing does not behave correctly

I also observed that while the mirror object gets the expected font-size in its style, its scroll height does not behave as expected. Also if you apply the font-size to all textareas, it behaves correctly.

Hi,

Thank you for a great plugin. I am using your plugin on a hidden div. I want to be able to initially show the textarea where the rows="1" and once the user types more than a single line it'll expand to multiple lines. The behavior is similar to Facebook's comments. It looks like a textarea that has a single row, and as the user types something and it has to continue to multiple lines, the textarea expands. Is this possible out of the box?

Thanks!

Hi,

I'm using your directive and it works great. One thing though. I'm setting the rows attribute of my textarea to 30, however when it loads it's much smaller than that and it lets me enter more than 30 rows of input.

I'd love to see an attribute for the directive where you specify a range. Something like this:

<textarea msd-elastic msd-elastic-min-rows="5" msd-elastic-max-rows="30"></textarea>

That would make the textarea 5 rows tall on load and let it grow only up to 30 rows.

I'm using your fantastic directive on a textarea in Bootstrap's modal dialog (via Angular-Strap bs-modal directive) and the problem I'm facing is when modal dialog is displayed, the textarea has wrong height.

I was able to track the problem down to the mdsElastic directive initialization of the globals - borderBox and boxOuter (and possibly others too). They are initialized from getComputedStyle() result which returns empty values. The problem is possibly due to fact, that modal window directive is adding the DOM structure with modal window content to the document on-the-fly (i.e. it is added in time of showing the modal dialog) and maybe therefore the getComputedStyle() returns empty values.

I've solved this issue temporarily by adding recalculateDefaults() method to scope.$on('elastic:adjust'). This method just assigns the same values to the borderBox and boxOuter globals but I'm firing the event for elastic:adjust after the modal dialog is fully shown (and therefore the getComputedStyle() returns correct values). Works as expected, but unfortunately the resizing of textarea is visible (and possibly annoying) for the user (i.e. modal is fully shown and after that, the textarea "jumps" to its correct height).

I just wanted to let you know that there is an issue with modal dialogs and maybe there is someone out there who knows how to fix this correctly.

This looks great, and I would like to use it in something I am working on (forms-angular). What are the licence terms? (Just in case you haven't seen it http://choosealicense.com/ makes things simple)

Is there a possibility to limit the size of the textbox?
I want to avoid the text area to grow arbitrarily large.

It appears there is a minimum height for the textarea of 2 lines. Is this intentional? When the content wraps to the second line, it maintains 2 lines (as I would expect). When it reaches the end of line 2, it adds a third line, as expected as well. But when there is only enough content for 1 line, it never has less than 2 lines.

Could you consider adding an option to enable automatic fitting to placeholder text ? (when textarea is empty).

Thank you for this simple directive, it's very time saving.

To add support to IE8 you can add
after this:
var ta = element[0],
$ta = element;

Add this:
if (!$window.getComputedStyle) {
$window.getComputedStyle = function (el, pseudo) {
this.el = el;
this.getPropertyValue = function (prop) {
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}

After putting submit button and clicking it. It does not go back to the normal size of the text area. Even the text area is blank. Any idea how to resolve this issue?

I use your fantastic directive all over my site, but I keep walking into an issue. I create a textarea, which should have a height of 1 textline. The directive automatically adds an extra white line, when the area expands it fits perfectly, but when deleting all the text it falls back to two empty lines.

Is there a setting to control the initial height of the textarea? All my css gets overridden by the javascript heights set by the directive.

Thanks a lot!

I'm not shure if it's cauesed by the same bug as #54 , but I found that refresh of model wont be reflected to textarea if you'll do it in resize event
http://plnkr.co/edit/wKhuQqq7hJs53d57zx1X?p=preview

For instance, when you want to use elastic TextArea as input for message system and you want to send message -> clear content when user press enter. I was able to distinct resize event when it's caused by pressing enter, but I wasn't able to reproduce it in plunker.. :-/

    $scope.$on('elastic:resize', function (event, element, oldHeight, newHeight) {
        if (element.context.innerHTML.substr(element.context.innerText.length) === "\n") {
            $scope.comment = ""; //Wont refresh immediately, only after you click
        }
    });

It would be nice if this had a mode where it could listen for focus lost events (onblur) and shrink the textarea to a single line.

Additionally, it would be nice if the expanded textarea could 'float' over the elements below it. This might be possible with absolute positioning.

Hi. Before i go and try and implement something I thought I would ask, as your directive is already pretty awesome.

What I would like is to have the current functionality of msd-elastic, but with the option of it setting as minimum size the height of the containing element. The use case is, text areas within table cells.

Thanks

Chris

When I have no content in the <textarea>, the default height is set too high. I expect it to have the same height as if it were a plain <input type=text>.

I want to have '\n\n' as global config append. When I set this to the textarea directly, it's working (newline is added about 2-3 spaces before end of the line)

When I set it globally, it just adds 4 newlines immediately. See example: http://plnkr.co/edit/FKtjm6TbvrvxbYFxQKcw?p=preview

Hi,

I am using elastic.js in my bootstrap model but the problem is when i open up my model first time , then the textarea height is too long than the text .When i edit something in it, close the model then it comes fines but if i refersh the page then again the textarea is too long.Below is the code for it.

                <div class="modal-body">
                    <div class="container-fluid">
                        <div>
                            <div>
                                <dl style="margin-bottom: 0">
                                    <dd>
                                        <textarea class="animate msd-elastic: \n;" placeholder="" style="width: 100%;" id="SPBI" ng-model="c.SpecialBillingInstructionsModel" ng-blur="Save(c.SpecialBillingInstructionsModel)"></textarea></dd>
                                </dl>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <dl>
                                    <dt>Transfer All Instructions</dt>
                                </dl>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <dl>
                                    <dt>Transfer Matter for Fee</dt>
                                    <dd>
                                        <input id="FeeTransferMatter" type="text" ng-model="c.FeeTransferModel" ng-blur="SaveTransf(c.FeeTransferModel,c.CostTransferModel,c.ChargeTransferModel)" style="width: 80px; height: 30px" /></dd>
                                </dl>
                            </div>
                            <div class="col-xs-3 ">
                                <dl>
                                    <dt>Transfer Matter for Cost</dt>
                                    <dd>
                                        <input id="CostTransferMatter" type="text" ng-model="c.CostTransferModel" ng-blur="SaveTransf(c.FeeTransferModel,c.CostTransferModel,c.ChargeTransferModel)" style="width: 80px; height: 30px" /></dd>
                                </dl>
                            </div>
                            <div class="col-xs-3 ">
                                <dl>
                                    <dt>Transfer Matter for Charge</dt>
                                    <dd>
                                        <input id="ChargeTransferMatter" type="text" ng-model="c.ChargeTransferModel" ng-blur="SaveTransf(c.FeeTransferModel,c.CostTransferModel,c.ChargeTransferModel)" style="width: 80px; height: 30px" /></dd>
                                </dl>
                            </div>
                        </div>                            
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>

My usecase it to use textarea without ng-model and in this case, its not working.
For example:
<textarea id="some-text" msd-elastic></textarea>

specifying dummy ng-model will work.

I was trying to figure out why the height of my textarea field is different from Chrome and IE 11. After some digging, I found that IE returns a scrollHeight of zero but Chrome returns a scrollHeight of 20.

Is there a work-around for this to work in IE?

This was my attempt at it.

mirrorHeight = mirror.scrollHeight > 0 ? mirror.scrollHeight : 20;

Thanks!

The current version is 2.3.5

thanks!

For the textarea I use a cool CSS effect upon focus:

textarea:focus {
    transform: scale(1.05);
}

but this is going to break the animation and height calculations do not seem entirely correct. Do you think you could include that into the height calculations?

Hi All,

Forgive my ignorance as I am very new to angular, so there might be an easy way to do this that I am not seeing.

When the textarea gets resized, I need to resize another element as well. The bottom margin on another element. I come from jQuery so am looking for some kind of call back or something.

Any ideas?

The documentation states that it should be possible to enable this on a text area by adding the class msd-elastic.

This gives an error that the class isn't available and looking at the source code it seems possible that the class may be something else.

Can I can confirmation that this component works correctly on the latest AngularJS? Also can the documentation be updated with the correct syntax if it has changed.

Thanks.

Hey,
Love the directive!
Quick q - is there an easy way to specify a maximum expansion, e.g in terms of height or (preferably) rows ? I imagine enforcing a css 'max-height' might do it, but thought I'll ask if supported out of the box or any better way to do it

thanks,
Adam

i have no clue how to do this right now, or i would hack away at your code and do a PR.
i noticed that your demo has some sort of animation, but it's hard to see it, and it didn't work in my code.

i have had success with $animate based animations.

Hi,

I've ran into the issue that your library sets the property
resize: horizontal

to all <textarea>s.

Is there a way to disable this?

It'd be great if you were published on NPM so I could just user Browserify; I'm trying to get rid of my Bower.json :)

I am having something like

$http.get(path)
    .success(function(data){
    $scope.data = data;
    $rootScope.$broadcast('elastic:adjust'); // as mentioned in the docs
  });

Here data is modelled to the textarea

But this is an issue as expected. Sometimes the textarea is set to precise length, and sometimes it fills up the entire page (almost 4 times the expected size). Is this something to do with the $digest cycles?

Our customers see performance lags when typing very fast.
I debugged the elastic code and saw that every key stroke fires the adjust-function 2 times! One time called by the model-watcher and second time by the "oninput"-event of the textarea.

To improve the performance I buffered the function-call of adjust:

var bufferedAdjust = null;
function adjust() {
    if( !bufferedAdjust ) {
      bufferedAdjust = $timeout(_adjust, 100);
      bufferedAdjust.then(function () {
        bufferedAdjust = null
      });
    }
}

function _adjust() {
 // here is the original adjust-function-code
...

Noticed this issue:

If the user is typing in mobile safari, and the autocorrect context shows up, like this:

Then hitting enter will return values like this:

// placed into function adjust() on line 164:
console.log("adjust():", taHeight, "mirrorHeight:", mirrorHeight);
// logs "adjust(): taHeight: 35 mirrorHeight: 35"

However, if the autocorrect context is NOT showing, like this:

Upon hitting enter, adjust() calculates the correct mirrorHeight and changes the textarea as expected:

// placed into function adjust() on line 164:
console.log("adjust():", taHeight, "mirrorHeight:", mirrorHeight);
// logs "adjust(): taHeight: 35 mirrorHeight: 66"

When setting msd-elastic to have no returns in the textarea. Chrome renders correctly with a height of 32px and one line but Safari renders with a height of 48px as if there were 2 lines.

Chrome:

Safari:

What should i do to get safari to render with only 1 line to start?

I know this directive automatically resize the height based on the content. However, I still like the fact that I can manually drag to expand the height of the textarea. Is it possible?

Thank you,

Tan

If we changed the font-size of the textarea after initMirror(), it won't be copied to mirror.
Therefore, it can't calculate the correct size of the textarea.

Maybe it should re-copy styles after received 'elastic:adjust'?

Thanks for this great directive. It's really convenient. 👍

Thanks for this. It works great! I do run into a problem, though, when the model of the textarea changes from 'outside'.
The textarea doesn't resize in that case.

I'm used to define height and min-height in percent (100%).
It seems that parseInt does not consider percent value.
So when defining min-height=100%;, elastic sets height to 100px.

Hi, I am using msd-elastic as a directive. But by default is seting height as 64px (in chrome). I am even not adding any "\n"(new line charcter behind it). I wanted to set as 46px initially across all browser. Any appropriate suggestions ?

Thanks for this nifty directive!

I have included it in my app (Angular 1.2.6). When I load any page with a textarea for the first time, the height/width calculations are botched.

If I refresh, it then works perfectly.
Do I need to load this in a particular order?

While integrating angular-elastic inside globaleaks (globaleaks/GlobaLeaks#1081) i've found that the Readme.md is missing some guidelines in order to include the javascript file of the library.

This is generally something to include in the Readme.md of an angular library that can improve the adoption by users.

e.g. you should state to include something like:

<script src="components/angular-elastic/elastic.js"></script>