Установка карусели ng-bootstrap на div внутри мод ng-bootstrap - PullRequest
Новая
       7

Установка карусели ng-bootstrap на div внутри мод ng-bootstrap

0 голосов
/ 30 октября 2018

Я пытался правильно установить свойства css, чтобы изображение карусели ng-bootstrap вписывалось в заданное пространство (div) внутри пользовательского мода ng-bootstrap. Посмотрите этот раздвоенный код stackblitz .

Как видно из примера источника, изображение перекрывает заданное пространство (высоту) модального поля, а также col-8, где оно размещено.

Как сделать так, чтобы карусель соответствовала размеру ее родителя col-8? чтобы не перекрывать модальный размер.

UPDATE

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

После некоторых проб и ошибок я пришел к этому моменту. Только carousel-inner и его потомки не следуют за своим родительским div, который является ngb-carousel.carousel-modal. Смотрите это изображение ниже

enter image description here

Как показано на рисунке выше, я не могу заставить carousel-inner следовать размеру его родительского элемента ngb-carousel.carousel-modal, который уже соответствует модальной высоте. он всегда перекрывает и простирается на высоту carousel-modal. Обратите внимание, что я установил их на max-height:100%, чтобы сделать его отзывчивым.

Ответы [ 3 ]

0 голосов
/ 31 октября 2018

По сути, вам просто нужно снизить высоту на 100% по иерархии тегов.

Чтобы установить высоту модального тела, я установил 100% - Высота модального заголовка (69px). 

.modal-body {
    height: Calc(100% - 69px);
}

ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
  height:100%;
}

Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css

0 голосов
/ 01 ноября 2018

После нескольких часов понимания height, max-height и его связи с родительским тегом. Я пришел с исправлением. см. обновленный stackblitz здесь.

По сути, я изменил размер изображения, чтобы оно соответствовало родительскому содержимому, давая родительское содержимое, а также img фиксированную высоту. Следовательно, он автоматически изменит размер изображения, чтобы соответствовать родительскому элементу div.

0 голосов
/ 30 октября 2018

Дайте изображению фиксированную высоту внутри контейнера (который также имеет фиксированную высоту). Затем разместите заголовок карусели, например, так: 

img {
    height: 650px; /*adjust for your project*/
    width: auto !important;
}

@media only screen and (max-width:767px){
  img { width: 100% !important
   }    
} 

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 3%; /*adjust for your project*/
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    max-width: 50%; /*adjust for your project*/
}

Поиграйте со значениями, которые соответствуют вашим потребностям.

...