Сгенерированный фундамент 6 Эквалайзер не выравнивается [см. Пример]

Я генерирую некоторые элементы html с помощью тегов выравнивания, а затем добавляю их на страницу. Это использует Zurb's Foundation 6 equalization example code, слегка измененный.Сгенерированный фундамент 6 Эквалайзер не выравнивается [см. Пример]

Проблема

Мой HTML страницы есть кнопка, которая при нажатии создает код.

Элементы сначала имеют выравниваемую высоту элемента, но при изменении размера их до наименьшего размера и затем изменении размера до полного экрана они не выравниваются.

Я делаю это в underscore.js, используя их систему шаблонов, но я также тестировал это с помощью только jquery и с тем же эффектом.

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>

Он использует все КДС и удаленные изображения, таким образом он должен правильно отображаться во всех браузерах.

Некоторые вещи, которые я заметил, что отличаются от правильного функционирования установки выравнивания фундамента:

Там нет data-events="resize" метки на моих уравнены дивы
Он устанавливает height: auto; на элементах вместо их размеров пикселя.

источник

2016-07-22 NuclearPeon

Я зарегистрировал проблему с Zurb Foundation и получил решение.

Хотя документация не явно указать это: при добавлении элементов фундамента на страницу, они не могут содержать теги фундаментные

Строка, которая содержала теги фундаментные:

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

стали:

<div class="row">

и мой подлинник стал:

<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>

источник

2016-07-25 18:46:53 NuclearPeon

Сгенерированный фундамент 6 Эквалайзер не выравнивается [см. Пример]

ответ

Смежные вопросы