I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e.g., Container2), resulting in space between the flipped div and the subsequent elements.
Furthermore, when running this code on Internet Explorer, the div flips but doesn't display the correct content. I encourage you to test my demo in both IE and Chrome to observe the issue.
I have also included images to aid in understanding the problem.
Initial State to address the height/space issue from both content and Container2: https://i.sstatic.net/8Wrta.png
After clicking on the edit link for the 2nd state: https://i.sstatic.net/d8i3m.png
I trust my explanation is clear enough. Thank you.
HTML
<br>
<br>
<br>
<br>
<div class="container">
<div class="flip">
<div class="moveOnchange card">
<div class="face front bgGrey">
<div class=" portlet portletTodelete ">
<div class="portlet-header"> <span class=" "> Front Side </span>
<div class="dropdown pull-right ">
<span class="pull-right ">
<span class="flipControl" >Edit <span class="glyphicon glyphicon-pencil pull-right flipLink"> </span> </span>
</span>
</div>
<!-- portlet-content -->
</div>
<!-- portlet-header -->
</div>
<div class="portlet-content">content</div>
<!-- portlet- -->
</div>
<!-- moveOnchange-->
<div class="face back">
<div class="inner">
<div class="portlet">
<div class="flipForm bgGrey"> Back Side
<ul class="list-inline pull-right ">
<li class="flipControl"> <span class="pull- right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>
</li>
</ul>
<hr class="hrflipForm">
</div>
<!-- Header Closed -->
<div class="portlet-content">
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text</div>
<!--- Portlet content -->
</div>
</div>
</div>
</div>
</div>
<div class="container2 container border">container 2</div>
</div>
CSS
.flipForm {
padding:5px;
}
.bgGrey {
background: #efefef;
}
.portlet {
border:solid 1px red;
padding: 10px;
}
.portlet-header {
padding: 0.2em 0.3em;
/*margin-bottom: 0.5em;*/
position: relative;
}
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 0 10px 0;
height: 50px;
}
/************* Flip and show Form. ************/
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
height: auto;
}
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
height: auto !important;
margin: 0px !important;
}
.container2 {
border:solid 1px green;
height:50px;
padding:5px;
}