fix(dialog): adds logic to account for image load delays that could

impact content height

Author: Robert Messerle

src/components/dialog/demoBasicUsage/dialog1.tmpl.html

@@ -31,10 +31,10 @@ <h2>Mango (Fruit)</h2>
       More on Wikipedia
     </md-button>
     <span flex></span>
-    <md-button ng-click="answer('not useful')" style="margin-top:20px;">
+    <md-button ng-click="answer('not useful')">
      Not Useful
     </md-button>
-    <md-button ng-click="answer('useful')" style="margin-top:20px;margin-right:20px;">
+    <md-button ng-click="answer('useful')" style="margin-right:20px;">
       Useful
     </md-button>
   </div>

src/components/dialog/dialog.js

@@ -9,15 +9,23 @@ angular.module('material.components.dialog', [
   .directive('mdDialog', MdDialogDirective)
   .provider('$mdDialog', MdDialogProvider);
 
-function MdDialogDirective($$rAF, $mdTheming) {
+function MdDialogDirective($$rAF, $mdTheming, $timeout) {
   return {
     restrict: 'E',
     link: function (scope, element, attr) {
       $mdTheming(element);
       $$rAF(function () {
+        var images;
         var content = element[0].querySelector('md-dialog-content');
-        if (content && content.scrollHeight >= content.clientHeight) {
-          element.addClass('md-content-overflow');
+
+        if (content) {
+          images = content.getElementsByTagName('img');
+          addOverflowClass();
+          //-- delayed image loading may impact scroll height, check after images are loaded
+          angular.element(images).on('load', addOverflowClass);
+        }
+        function addOverflowClass () {
+          element.toggleClass('md-content-overflow', content.scrollHeight > content.clientHeight);
         }
       });
     }