Ich erzeuge einige HTML-Elemente mit Entzerrungs-Tags und hefte sie dann an die Seite an. Dies verwendet Zurb's Foundation 6 equalization example code, leicht modifiziert.Generated Foundation 6 Equalizer kann nicht ausgeglichen werden [siehe Beispiel]
Problem
Meine HTML-Seite hat eine Schaltfläche, die beim Anklicken des Code erstellt.
Die Elemente scheinen zunächst die Elementhöhen ausgeglichen zu haben, aber wenn sie auf ihre kleinste Größe skaliert und dann wieder auf Vollbildgröße skaliert werden, werden sie nicht entzerrt.
Ich mache dies in underscore.js mit ihrem Templating-System, aber ich habe auch dies mit nur jquery getestet, um den gleichen Effekt.
foundation.html
<!DOCTYPE html>
<html>
<head>
<title>Foundation Equalizer Fail Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css" rel="stylesheet">
</head>
<body>
<input type="button" value="Generate Equalizer">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/[email protected](foundation.min.js+js/foundation.abide.js+js/foundation.core.js+js/foundation.equalizer.js+js/foundation.util.mediaQuery.js+js/foundation.accordion.js+js/foundation.accordionMenu.js+js/foundation.drilldown.js+js/foundation.dropdown.js+js/foundation.dropdownMenu.js+js/foundation.interchange.js+js/foundation.magellan.js+js/foundation.offcanvas.js+js/foundation.orbit.js+js/foundation.responsiveMenu.js+js/foundation.responsiveToggle.js+js/foundation.reveal.js+js/foundation.slider.js+js/foundation.sticky.js+js/foundation.tabs.js+js/foundation.toggler.js+js/foundation.tooltip.js+js/foundation.util.box.js+js/foundation.util.keyboard.js+js/foundation.util.motion.js+js/foundation.util.nest.js+js/foundation.util.timerAndImageLoader.js+js/foundation.util.touch.js+js/foundation.util.triggers.js)"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/template" id="t_underscore">
<div class="row" data-equalizer data-equalize-on="medium">
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/square-1.jpg">
</div>
</div>
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
</div>
</div>
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
</script>
<script type="text/javascript">
$(document).foundation();
var template = _.template($("#t_underscore").html());
var t = $(template());
$("input[type=button]").on("click", function() {
$("body").append(t).foundation();
});
</script>
</body>
</html>
Es nutzt alle cdns und Remote-Bilder, so dass es auf allen Browsern korrekt angezeigt werden soll.
Einige Dinge, die ich bemerkt habe, die von einem gut funktionierenden Fundament Ausgleich Einstellungen unterschiedlich sein:
- Es gibt keine
data-events="resize"
Tags auf meine entzerrten divs - Es setzt
height: auto;
auf die Elemente statt ihrer Pixelgrößen.