Generated Foundation 6 Equalizer kann nicht ausgeglichen werden [siehe Beispiel]

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.

Quelle

2016-07-22 NuclearPeon

Ich habe ein Problem mit der Zurb-Stiftung eingereicht und die Lösung erhalten.

Obwohl Dokumentation nicht explizit diesen Zustand: wenn Gründungselemente auf der Seite anhängt, sie können nicht Grundlage Tags enthalten

Die Linie, die die Grundlage Tags enthalten:

<div class="row" data-equalizer data-equalize-on="medium">

wurde:

<div class="row">

und mein Skript wurde:

<script type="text/javascript"> 
    $(document).foundation(); 
    var template = _.template($("#t_underscore").html()); 
    $("input[type=button]").on("click", function() { 
     $("body").append(template); 
     var equalizer = new Foundation.Equalizer($(template), {"data-equalize-on": "medium"}); 
    }); 
</script>

Quelle

2016-07-25 18:46:53 NuclearPeon

Generated Foundation 6 Equalizer kann nicht ausgeglichen werden [siehe Beispiel]

Antwort

Verwandte Themen