framework7

Open full view…

setting adjustable height for .swiper-container

gmarzloff
Fri, 19 May 2017 05:48:48 GMT

Hello, I am using multiple swipers whose divs of class `.swiper-slide` are dynamically populated with varying amounts of text. I am trying to set height of the `.swiper-container` to adjust based on the height of the largest slide. I can set the absolute `height` in the css, but `min-height` isn't working: HTML excerpt: --- html <div class="swiper-container fim-mini-slider swiper-0 swiper-container-horizontal" index="0"> <div class="swiper-pagination"></div> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-fim" score="7"><span>(7) Complete Independence - eats from a dish while managing variety of food consistencies, and drinks from a cup/glass with meal presented on table/tray. Opens containers, butters bread, cuts meat, pours liquids, uses a spoon or fork to bring food to mouth where it is chewed and swallowed.</span></div> </div> </div> --- CSS excerpt: --- css .fim-mini-slider { height: 120px; /* min-height: 50px; using this instead of height doesn't work */ overflow: hidden; } --- Javascript excerpt for slider functionalit y, from a for loop (the real code includes an iterator): --- js myApp.swiper('swiper-0', { pagination:'.swiper-pagination', grabCursor: true, spaceBetween: 50 }); --- Appreciate any help!

gmarzloff
Fri, 19 May 2017 14:30:13 GMT

fixed it, had to target `.swiper-slide` and `.swiper-pagination-bullets`