Пропадает слайдер в модальном окне

267
02 февраля 2018, 20:37

Вот код модалки:

<div class="modal details3 mod" style="display: flex;">
    <div class="modal-area"></div>
    <div class="container">
        <div class="modal-close-button">
         <a class="close-button" href="#"></a></div>
         <div class="slider-nav"><span class="glyphicon glyphicon-chevron-left prev slick-arrow"></span>
        <span class="glyphicon glyphicon-chevron-right next slick-arrow">
        </span></div>
        <h3>Комплексы</h3>
        <div class="desc_content"><p>Комплекс зданий и сооружений, опеспечивающий полный цикл от сбора урожая до его реализации.</p>
        <p>Фруктовый центр включает:</p>
        <ul>
         <li>- фруктовые хранилища,</li>
         <li>- товарный цех для сортировки и упаковки продукции,</li>
         <li>- административно-бытовой корпус</li>
         <li>- линия по производству контейнеров,</li>
         <li>- резервуары запасов воды,</li>
         <li>- склад для хранения хим. удобрений,</li>
         <li>- весовые</li>
         <li>- транспортный цех</li>
        </ul>
        <h3>Молочно-товарная ферма</h3>
        <p>Мы предлагаем комплексную разработку и строительство современных молочно-товарных ферм «под ключ». Осуществляем проектирование, строительство или реконструкцию животноводческих комплексов, используя ведущие мировые технологии и оборудование.</p>
        <ul>
         <li>- коровники до 400 голов каждый</li>
         <li>- доильный блок</li>
         <li>- навозохранилище</li>
         <li>- сооружение для осаждения песка</li>
         <li>- силосно-сенажные сооружения</li>
         <li>- въездной дизбарьер</li>
         <li>- административно-бытовой корпус</li>
        </ul>
        <h3>Товарный цех</h3>
        <p>Необходимое звено фруктового центра, которое включает в себя обработку плодов по следующим операциям:</p>
        <ul>
         <li>- сортировка по качеству (фракция, вес, цвет, наружные повреждения)</li>
         <li>- взвешивание и упаковка в ящики</li>
         <li>- охлаждение</li>
         <li>- маркировка</li>
        </ul>
        <p>Сотрудничество с такими крупными компаниями как AWETA, MAF-RODA, UNITEC, GREEFA, SORTER позволяет ООО "Ростбилд" соответствовать любым пожеланиям Заказчика</p>
       </div>    
       <div class="modal__slider slick-initialized slick-slider">
       </div>
    </div>
</div>

CSS:

.modal.mod .container {
    max-height: 100vh;
    min-height: auto;
    overflow-y: scroll;
}

JS:

projectSlides.click(function(e){
          var det = $(this).data("mod");
        showModal(det, 300);
        $('.modal.'+det+' .modal__slider').slick({
            slidesToShow  : 2,
            slidesToScroll: 1,
            appendArrows  : $modalArrows,
            nextArrow     : nextBtn,
            prevArrow     : prevBtn,
        });
        $('.modal.'+det+'.container').append(modalArrowsContainer);
        $('.modal.'+det+' .slider-nav .prev').click(function(){
          $('.modal.'+det+' .modal__slider').slick('slickPrev');
        });
        $('.modal.'+det+' .slider-nav .next').click(function(){
          $('.modal.'+det+' .modal__slider').slick('slickNext');
        });
      });

Когда высота модалки не превышает высоты окна - все хорошо, но если иначе - в Хроме слайдер схлопывается (height: 0px)

В Firefox все хорошо. С чем это может быть связано?

READ ALSO
Как упростить конструкцию на PHP?

Как упростить конструкцию на PHP?

Например, сначала просто определить массив нужных полей, затем заполнить их из $_POST, и передать дальшепроверять что $ins это массив смысла нет,...

220
Вывод данных с MySql в select

Вывод данных с MySql в select

Имеется форма в которой есть <select> (Код ниже)

316
Поля формы html

Поля формы html

Передо мной задача выводить пользователю необходимые моля для формы в зависимости от его выбора, селекта, вопрос в том как это лучше сделать?!...

292