0

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

<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;
}
.modal__slider {
    width: 100%;
    height: 300px;
    display: flex;
}

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 все хорошо. С чем это может быть связано?

1
  • В консоли что-нибудь по ошибкам есть? 1 фев 2018 в 14:35

1 ответ 1

0

Как выяснилось, все дело в блоке с классом modal__slider. Если ему задавать высоту как height, то он будет схлопываться в хроме, но если заменить height на min-height, то все становится хорошо. Итак, стиль для modal__slider теперь выглядит так:

.modal__slider {
    width: 100%;
    min-height: 300px;
    display: flex;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.