angular-elastic icon indicating copy to clipboard operation
angular-elastic copied to clipboard

Safari initial height ( with ng-repeat an ng-resource )

Open jarnovanrhijn opened this issue 10 years ago • 2 comments

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.

jarnovanrhijn avatar Mar 02 '15 15:03 jarnovanrhijn

Hi,

Did you ever get anyway with this? The forceAdjust method is there for situation like this, but be interesting to hear if you got any further.

Thanks for the contribution.

monospaced avatar Jul 17 '15 15:07 monospaced

Thank you for leaving this issue open, together with #67 it helped me track the issue in our app. For what it's worth, here's our situation and workaround.

We had a text area that was initially hidden. Upon user interaction (click) this happened in order:

  • A function on the controller is called.
  • That function uses a $timeout to initialize a callback after 800ms.
  • The callback does some DOM manipulation (yeah, I know...) and switches around with classes and whatnot, causing the boxes in the DOM to change slightly.
  • The callback also makes sure the text area handled by elastic becomes visible.

The textarea would then sometimes be slightly of the wrong height.

Our workaround looked like this:

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);
}

The $broadcast indirectly causes the library to do a forceAdjust, making the box resize to the appropriate height.

jeroenheijmans avatar Jan 20 '17 07:01 jeroenheijmans

Archiving repository.

monospaced avatar Sep 21 '22 12:09 monospaced