Skip to content

Commit 113e444

Browse files
committed
fix(modal): Fix calculation of top when % property
An absolute-positioned element with % "top" property that is hidden through "display: none;" does not return the same value as a visible one for the following JS: window.getComputedStyle(element).top The computed "top" value for the hidden element is still the % value, while it is the computed px value if the element is visible or when using "visibility: hidden;". This is demonstrated in the following Plunker: http://run.plnkr.co/preview/cjkut64np00072y6ccj3tmqem/ $modalStack.open expects the expression above to return the px value, so a "10%" value gets treated as "10px". This is not the desired behavior, and a big limitation now that people use a big range of screen sizes. The faux modal is temporarily inserted with "z-index: -1" (JS), "display: none" (CSS), and "visibility: hidden;" (CSS). As a workaround, this commit assigns "display: block" (JS) to the faux modal.
1 parent fe75e76 commit 113e444

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

src/modal/modal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ angular.module('mm.foundation.modal', ['mm.foundation.transition'])
242242

243243
// Create a faux modal div just to measure its
244244
// distance to top
245-
var faux = angular.element('<div class="reveal-modal" style="z-index:-1"></div>');
245+
var faux = angular.element('<div class="reveal-modal" style="z-index:-1; display: block;"></div>');
246246
parent.append(faux[0]);
247247
cssTop = parseInt($window.getComputedStyle(faux[0]).top) || 0;
248248
var openAt = calculateModalTop(faux, cssTop);

0 commit comments

Comments
 (0)