How to change expandable card height?

[Manmade]

Im using css background cover when displaying the image and I would like to use one height when the expandable card is closed and the full height when it is opened.

So I would like to show the 200 pixels of the center of the image when the card is closed and when it is opened I would like to show the full height of the image.

I have tested to change the height to a fixed height(510 pixels in this case) when the card open event fires but and it works but it is not looking smooth enugh.

So any idea how to do this? Thanks.

[Panov]

@Manmade

ound cover when displaying the image and I would like to use one height when the expandable card is closed and the full height when it is opened.

Did you solve this?

I also tried to have smaller closed card, but no luck there.

[njvan]

I would also be interested. Please share when you can.

[Panov]

@Manmade

mobil at the last ta

yup! that’s it. Thank you!

[Manmade]

Ok. I As you saw, I have it with single images and with a swiper. Do you want both? Or just one of them? I will fix it tomorrow morning.

[njvan]

Hi Manmade, I’d appreciate seeing both. Thank you!

[Manmade]

Ok here it comes. I hope I haven´t missed anything
I hope you get it working.

In the .ccs file:

:root {
  --f7-card-expandable-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  --f7-card-expandable-tablet-width: 604px;
  --f7-card-expandable-tablet-height: 890px;
}
.card-backdrop.custom-backdrop.card-backdrop-in {
    opacity: 1;
}
.card-expandable {
    border-radius: 8px!important;
}
.card-expandable.card-opened, .card-expandable.card-opening {
    border-radius: 0px!important;
}
.expandable-card-swiper-bg-img{
	height: 100%;
	width:100%;
	margin-left: 0px; 
	padding-left: 15px!important;
	color: #fff;
	font-size: 20px; 
	background-size: cover; 
	background-position: center;
	background-repeat:no-repeat;
	display:flex;
	justify-content:flex-start;
	align-items: center;
	-webkit-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-moz-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-ms-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-o-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
}
.card-expandable-bgimage{
		-webkit-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-moz-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-ms-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-o-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
}
.swiper-container-mer{
	
	-webkit-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-moz-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-ms-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		-o-box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
		box-shadow: rgba(0,0,0,.25) 0 2px 3px!important;
}
.swiper-pagination.swiper-pagination-mer.swiper-pagination-bullets > span.swiper-pagination-bullet.swiper-pagination-bullet{
	background: #ccc;
}
.swiper-pagination.swiper-pagination-mer.swiper-pagination-bullets > span.swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: #fff;
}
/*.card-opened{box-shadow: rgba(0,0,0,.2) 0 0px 1px!important;}*/
/*card-expandable-tabs*/


.expandable-card-swiper-center-headline{
	display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
	-webkit-text-shadow: rgba(0,0,0,.25) 0 1px 3px;
	-moz-text-shadow: rgba(0,0,0,.25) 0 1px 3px;
	-ms-text-shadow: rgba(0,0,0,.25) 0 1px 3px;
	-o-text-shadow: rgba(0,0,0,.25) 0 1px 3px;
	text-shadow: rgba(0,0,0,.25) 0 1px 3px;
}
.expandable-card-swiper-center-text{
	font-size:20px;
	padding: 10px 25px 0px 25px;
	font-weight: normal;
}
.swipeable{
	opacity:1!important;
	display:flex;
	justify-content: center;
	color:#Fff;
	align-items:flex-start;
	padding:0px;
	flex-wrap: wrap;
	overflow-y:auto;
}
.card-opened-fade-out-tab-swiper{
	font-size:20px;
	font-weight:bold;
	top:10px;
	color: #fff;
	margin-left:15px;
	position:absolute;
	z-index:110;
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	width:100%;
	opacity:1;
}
.card-opened-fade-out-tab-swiper-headline{
	width:100%;
	text-align: left;
	z-index:1;
}
.card-opened-fade-out-tab-swiper-subheadline{
	width:100%;
	opacity: 0.7;
	text-align: left;
	z-index:10;
}
.card-expandable-swiper-pagination{
	position:absolute;
	width:100%;
	display:block;
	top:10px;
	padding: 5px 0px 5px 1px;
	text-align: center;
	z-index: 110;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 1;
  margin: 0 5px;
  box-shadow: 0px 1px 2px #555 inset;
}

In the .js file:
$$(document).on(“click”,".card-expandable-swiper", function(event){
setTimeout(function(){
},0);
});
$$(document).on(‘card:close’,".card-expandable-swiper", function (e) {
setTimeout(function(){
//console.log(“card close event”);
});
$$(document).on(“click”,".card-expandable-annonsera", function(event){
setTimeout(function(){
});
$$(document).on(‘card:close’,".card-expandable-annonsera", function (e) {
setTimeout(function(){
//console.log(“card close event”);
});
$$(document).on(“click”,".card-expandable-oppnabutik", function(event){
setTimeout(function(){
},0);
});
$$(document).on(‘card:close’,".card-expandable-oppnabutik", function (e) {
setTimeout(function(){
//console.log(“card close event”);
$(’.oppnabutikdiv’).animate({scrollTop:0}, { duration:400});
});
$$(document).on(‘click’,".card-expandable-tabs", function (e) {
setTimeout(function(){
if (app.device.ipad){
console.log(“swipercard open”)
$$(document).find(’.expandable-card-swiper-bg-img’).css({“height”:“700px”});
}
});
$$(document).on(‘card:beforeopen’,".card-expandable-tabs", function (e) {
//console.log(“before card open event”);
$$(document).find(’.card-opened-fade-out-subheadline’).animate({“opacity”:“0”}, { duration:100});
});
$$(document).on(‘card:close’,".card-expandable-tabs", function (e) {
setTimeout(function(){
//console.log(“card close event”);
$(’.swiper-slide-active’).animate({scrollTop:0}, { duration:200});
$$(document).find(’.card-opened-fade-out-subheadline’).css(‘opacity’,“0.7”);

    	if (app.device.ipad){
    		console.log("swipercard close event");
    		setTimeout(function(){
    		$$(document).find('.expandable-card-swiper-bg-img').css({"height":"510px"});
    		$$(document).find('.expandable-card-swiper-bg-img').css({"background-position":"center"});
    		},100);
    	}
    });
    $$(document).on('card:closed',".card-expandable-tabs", function (e) {
        //console.log("card closed event");
      	$$(document).find('.card-opened-fade-out-subheadline').css('display','block');
    	$$(document).find('.card-opened-fade-out-subheadline').css('opacity',1);
    });
    $$(document).on('card:opened',".card-expandable-tabs", function (e) {
    swiper111.pagination.update();
    });

    $$(document).on('page:init', '.page[data-name="mer"]', function (e) {
    var page = e.detail;

    swiper111 = app.swiper.create('.tabs-swipeable-wrap', {
       // effect: 'fade',
    	//autoplay: {
        //delay: 4000,
       // },
       preloadImages: false,
       lazy: {
        loadPrevNext: true,
    	loadPrevNextAmount : 1,
      },
       loop: true,
    	  speed:400,
    	navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
    	pagination:{"el": ".swiper-pagination111"},
    	slidesPerView: 1,
        //loop: true
    });

       swipermer = new Swiper('.swiper-container-mer', {
          direction: 'horizontal',
    	  spaceBetween: 0,
          //autoPlay: true,
    	  preloadImages: false,
       	  lazy: {
        	loadPrevNext: true,
    		loadPrevNextAmount : 1,
      		},
          loop: true,
    	  speed:400,
    	  
          pagination: {
            el: '.swiper-pagination-mer',
          },
          mousewheel: true,
        });
    	swipermer.init();
    });

And in the .html page:

  <div data-name="mer" class="page no-swipeback  no-animation" data-animate-pages="false" style="padding-top:0px;padding-bottom:0px;">
		<div class="navbar">
        <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title center">MENY</div>
       <!-- <div class="right"><i class="f7-icons color-gray button-logout">logout</i></div>-->

          </div>
        </div>
    <div class="page-content no-animation" style="padding-top:44px;padding-bottom:44px;max-width: 1024px;margin:0 auto;">
 
 <div class="block" style="width:100%;padding:15px 15px 15px 15px; margin: 0px;z-index:2;">
 
 
 <div class="card-backdrop custom-backdrop"></div>
 
 <div class="card card-expandable card-expandable-swiper" style=" margin:0 auto; height: 200px; margin-bottom:15px;"  data-backdrop-el=".custom-backdrop" data-backdrop="false" data-swipe-to-close="false">
  <div class="card-content" style="overflow: hidden;">
  <div class="swiperdiv" style="height:100%;overflow-y:auto;">
    <div class="" style="height: 510px;margin-top: -1px;">
    
    
    
    <div class="swiper-container swiper-container-mer swiper-init" >
        <div class="swiper-wrapper" style="height:100%;">
           
            <div class="swiper-slide swiper-slide-mer" style="opacity:1!important;display:flex;justify-content: center;color:#Fff;align-items:center;padding:0px;">
            
                <div data-background="images/swipers/salj/salj1.jpg" class="expandable-card-swiper-bg-img card-close swiper-lazy">
                
                <span class="card-opened-fade-out" style="font-size:20px;font-weight:bold;margin-top:10px;display:flex;flex-wrap:wrap;height:30px;align-self:flex-start;">
                <div style="justify-content: flex-start;display: flex;width:100%;opacity:0.7;font-size:16px;">Some text...</div>
                <small style="justify-self:flex-start;display:flex;flex-wrap:wrap;font-size:24px;">Some text...</small>
                </span>
                
                </div>
                
            	<div class="expandable-card-swiper-center-headline card-opened-fade-in">
                Some text...<br>
                <span class="expandable-card-swiper-center-text card-opened-fade-in">Some text...</span>
                </div>
                
            </div>
            
            <div class="swiper-slide swiper-slide-mer" style="opacity:1!important;display:flex;justify-content: center;color:#fff;align-items:center;padding:0px;">
            
            	<div data-background="images/swipers/salj/salj2.jpg" class="expandable-card-swiper-bg-img card-close swiper-lazy">
                
                <span class="card-opened-fade-out" style="font-size:20px;font-weight:bold;margin-top:10px;display:flex;flex-wrap:wrap;height:30px;align-self:flex-start;">
                <div style="justify-content: flex-start;display: flex;width:100%;opacity:0.7;font-size:16px;">Some text...</div>
                <small style="justify-self:flex-start;display:flex;flex-wrap:wrap;font-size:24px;">Some text...</small>
                </span>
                
                </div>

				<div class="expandable-card-swiper-center-headline card-opened-fade-in" style="width:100%;">
                Some text...<br>
                <span class="expandable-card-swiper-center-text card-opened-fade-in" style="width:100%;">Some text...</span>
                </div>
                                
            </div>
            
            <div class="swiper-slide swiper-slide-mer" style="opacity:1!important;display:flex;justify-content: center;color:#fff;align-items:center;padding:0px;">
            
            	<div data-background="images/swipers/salj/salj3.jpg" class="expandable-card-swiper-bg-img card-close swiper-lazy">
                
                <span class="card-opened-fade-out" style="font-size:20px;font-weight:bold;margin-top:10px;display:flex;flex-wrap:wrap;height:30px;align-self:flex-start;">
                <div style="justify-content: flex-start;display: flex;width:100%;opacity:0.7;font-size:16px;">Some text...</div>
                <small style="justify-self:flex-start;display:flex;flex-wrap:wrap;font-size:24px;">Some text...</small>
                </span>
                
                </div>

				<div class="expandable-card-swiper-center-headline card-opened-fade-in">
                Some text...<br>
                <span class="expandable-card-swiper-center-text card-opened-fade-in">
            Some text...
                </span>
                </div>
                                
            </div>
            
            <div class="swiper-slide swiper-slide-mer" style="opacity:1!important;display:flex;justify-content: center;color:#fff;align-items:center;padding:0px;">
            
            	<div data-background="images/swipers/salj/salj4.jpg" class="expandable-card-swiper-bg-img card-close swiper-lazy">
                
                <span class="card-opened-fade-out" style="font-size:20px;font-weight:bold;margin-top:10px;display:flex;flex-wrap:wrap;height:30px;align-self:flex-start;">
                <div style="justify-content: flex-start;display: flex;width:100%;opacity:0.7;font-size:16px;">Some text...</div>
                <small style="justify-self:flex-start;display:flex;flex-wrap:wrap;font-size:24px;">Some text...</small>
                </span>
                
                </div>

		<div class="expandable-card-swiper-center-headline card-opened-fade-in">
                Some text...<br>
                <span class="expandable-card-swiper-center-text card-opened-fade-in" style="width:100%;">
             Some text...
               Some text...<br>
                Some text...</span>
                </div>
                                
            </div>
            
            <div class="swiper-slide swiper-slide-mer" style="opacity:1!important;display:flex;justify-content: center;color:#fff;align-items:center;padding:0px;">
            
            	<div data-background="images/swipers/salj/salj5.jpg" class="expandable-card-swiper-bg-img card-close swiper-lazy">
                
                <span class="card-opened-fade-out" style="font-size:20px;font-weight:bold;margin-top:10px;display:flex;flex-wrap:wrap;height:30px;align-self:flex-start;">
                <div style="justify-content: flex-start;display: flex;width:100%;opacity:0.7;font-size:16px;">Some text...</div>
                <small style="justify-self:flex-start;display:flex;flex-wrap:wrap;font-size:24px;">Some text...</small>
                </span>
                
                </div>

				<div class="expandable-card-swiper-center-headline card-opened-fade-in">
               Some text...<br>
                <span class="expandable-card-swiper-center-text card-opened-fade-in">
               Some text... <a  style="color:#FFF;" href="mailto:Some text..." class="external" target="_blank">Some text...</a>
                </span>
                </div>
                                
            </div>
           
        </div>
        <div class="swiper-pagination swiper-pagination-mer" style="bottom:10px!important;"></div>
	</div>
    

     
    </div>
    <div class="card-header">
    <div style="color:#666;font-weight:bold;font-size:18px;margin-left:5px;">
	Some text...</div><div style="margin-right:5px;font-weight:normal;font-size:16px;color:#666;">&nbsp;</div>
    </div>
    <div class="card-content-padding card-close" style="color:#999;font-size:16px;padding-top:0px;">
         <a href="/nyttforetag/" class="link lasmerknapp card-close" style="margin-left:0px;width:100%;color:#F90;">Some text...</a>
       
        
  Some text...<br>
Some text...<br><br>
         
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
Some text...
        <br>
<br>
Some text...
        <br>
<br>
Some text...<br><br>

<div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
Some text...<br><br>

<div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
Some text...<br><br>

        
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
    Some text...<br><br>
    
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
    	Some text...<br><br>
        
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
    	Some text...<br><br>

<div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
     Some text...
        
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
    Some text...<br><br>
        
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
    	Some text...<br><br>
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
Some text...
 <br><br>
        
        <div style="margin: 0px ;font-size: 18px;font-weight:bold;color:#666;">Some text...</div>
Some text... <a  style="color:#F90;" href="mailto:Some text..." class="external" target="_blank">Some text...</a><br><br>

        
       
      <a href="/nyttforetag/" class="link lasmerknapp card-close" style="margin-left:0px;width:100%;color:#F90;">Some text...</a>
      
    </div>
  </div>
   <a href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">
        <i class="icon f7-icons" style="text-shadow: rgba(0,0,0,.25) 0 1px 1px;">multiply_circle_fill</i>
      </a>
  </div>
</div>


<!--single image expandable card-->
<div class="card card-expandable card-expandable-oppnabutik" style=" margin:0 auto; height: 150px;margin-top:15px;" data-backdrop-el=".custom-backdrop" data-backdrop="false" data-swipe-to-close="false">
  
  <div class="card-content card-expandable-content" style="margin-top: -1px;overflow: hidden;">
  <div class="oppnabutikdiv" style="height:100%;overflow-y:auto;">
    <div class="card-expandable-bgimage" style="height: 510px">
     <div style="background-image:url(image.jpg);height: 100%;margin-left: 0px;color: #fff;font-size: 20px; background-size: cover; background-position: center;" class="card-header card-close">
      		
            <div class="expandable-card-swiper-center-headline card-opened-fade-in">
               Some text...<br>
                <span class="expandable-card-swiper-center-text card-opened-fade-in" style="text-align:center;">
                  Some text...<br>
                
Some text... <a  style="color:#FFF;" href="mailto:Some text..." class="external" target="_blank">Some text...</a></span>
                </span>
             </div>
            
            <span class="card-opened-fade-out" style="font-size:20px;font-weight:bold;margin-top:0px;display:flex;flex-wrap:wrap;height:30px;align-self:flex-start;margin-left: 15px;">
                <div style="justify-content: flex-start;display: flex;width:100%;opacity:0.7;font-size:16px;">Some text...</div>
                <small style="justify-self:flex-start;display:flex;flex-wrap:wrap;font-size:24px;">Some text...</small>
             </span>
     </div>
    
    </div>
    <div class="card-header">
    <div style="color:#666;font-weight:bold;font-size:18px;margin-left:5px;">Some text...</div>
    <div style="margin-right:5px;font-weight:normal;font-size:16px;color:#666;">&nbsp;</div>
    </div>
    <div class="card-content-padding card-close" style="color:#999;font-size:16px;padding-top:0px;">
      Some text...<br><br>
       Some text... <br><br>
        Some text...<br>
		 Some text...<a href="mailto:Some text..." target="_blank" class="external">Some text...</a><br><br>
      
    </div>
 </div>   
     <a href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px;z-index: 100;">
        <i class="icon f7-icons" style="text-shadow: rgba(0,0,0,.25) 0 1px 1px;">multiply_circle_fill</i>
      </a> 
  </div>
</div>