angular-elastic
angular-elastic copied to clipboard
monospaced
Height too long on page load?
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.
I am having the same issue, but can't recreate it outside of my application. I wondered if it was Bootstrap, but, no such luck...
http://embed.plnkr.co/ShrdAFHxO3PXck3k1pYT/preview
@hardikbhatia did you figure out the cause or a solution?
UPDATE: http://embed.plnkr.co/6ugtCNRDyj0kIQTm2xfF/preview
I added the accordion from https://angular-ui.github.io/bootstrap/ and discovered that the height was set incorrectly for textareas that were hidden when the page loaded. If you go into scripts.js (plnkr edit) and set $scope.isOpen = false;, you'll see the textareas load with the proper height. But when set to false, they do not.
@hardikbhatia @ericmmartin I was having this same issue. It seems to be caused by the msd-elastic directive not detecting a change (and therefore not adjusting the textarea height correctly) when the ng-model first loads (on page/modal open) and populates the textarea with whatever is inside your ng-model. Maybe @monospaced can confirm?
The solution I used was to bind the ng-model value to the directive. That way, when the ng-model value is loaded initially (on page/modal open), the msd-elastic directive detects a change right away and recalculates the textarea height even before the user edits the textarea.
So to implement this in your own code, just add scope:{ ta-text: '=', }, code to your elastic.js file below line 26:
return {
require: 'ngModel',
restrict: 'A, C',
scope: {
taText: '=', //ng-model text from the textarea
},
link: function(scope, element, attrs, ngModel) {
And on your html textarea, add this:
<textarea msd-elastic="\n" ta-text="c.SpecialBillingInstructionsModel" ng-model="c.SpecialBillingInstructionsModel" ></textarea>
Note that msd-elastic is no longer set using class="msd-elastic: \n;" but instead using msd-elastic="\n and the new directive scope value ta-text contains the same ng-model value (c.SpecialBillingInstructionsModel) as the textarea.
For more info on passing strings, scope value, and functions to directives see this link: http://www.ng-newsletter.com/posts/directives.html
scope: {
// '=', -- Bind the ngModel value
// '&', -- Pass a function
// '@' -- Pass a string
//source: http://www.ng-newsletter.com/posts/directives.html
taText: '=', //ng-model text from the textarea
},
This doesn't seem to fix it for me... Does anyone have a solution? I seem to have it since I updated to Angular 1.4.
Hey, I had the same issue. This time the textarea is inside a bootstrap panel and the height was immensely large. My provisional solution was to change on elastic.js, line 197: this:
scope.$watch(function() {
return ngModel.$modelValue;
}, function(newValue) {
forceAdjust();
});
for this:
scope.$watch(function() {
return ngModel.$modelValue;
}, function(newValue) {
$timeout(forceAdjust, 30, false);
});
got the same problem - above workaround fixed it too. Does this fix can be added to bower repository
I'll repost my solution from #45 as it might help others. The short of it is that we used a workaround that causes a forceAdjust at just the right time. Our app unfortunately did some DOM manipulation in the controller that caused this issue to appear.
Here's the gist of the workaround:
this.someControllerFuncForClicks = function() {
$timeout(function() {
// Do DOM manipulation, set classes, etc.
// Set a controller prop making the textarea visible
$scope.$broadcast("elastic:adjust"); // <-- this is the workaround
}, 800);
}
@jeroenheijmans: Exactly this! No DOM manipulations on my part but simply the flex-grow that happened after the setHeight of the elastic directive
