Skip to content

Commit

Permalink
fix(modal): Fix calculation of top when % property
Browse files Browse the repository at this point in the history
An absolute-positioned element with % "top" property that is hidden
through "display: none;" does not evaluate to 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.
  • Loading branch information
kristinalim committed Aug 15, 2018
1 parent 30fe420 commit 93d3d87
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/modal/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ angular.module('mm.foundation.modal', ['mm.foundation.transition'])

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

0 comments on commit 93d3d87

Please sign in to comment.