1

I have a quite specific CSS question. I have made a turn/flip-card functionality in HTML and CSS.

I have one div(container), which is wrapping two overlaying elements. Sometimes, depends on the content, the one element is larger than the other. How can I make the height of the container vary from which element is currently in the foreground?

I have made a Codepen as a working space for this question. Please note that the back-card has twice the content as front-card. I have a quite specific CSS question. I have made a turn/flip-card functionality in HTML and CSS.

I have one div(container), which is wrapping two overlaying elements. Sometimes, depends on the content, the one element is larger than the other. How can I make the height of the container vary from which element is currently in the foreground?

I have made a Codepen as a working space for this question. Please note that the back-card has twice the content as front-card.

http://codepen.io/Froelund/pen/gppBvX

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

.flip-container.flip .flipper {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip-container,
.front,
.back {
  margin-bottom: 40px;
  width: 100%;
  height: 180px;
  text-align: center;
}

.flip-container .top,
.front .top,
.back .top {
  padding: 30px 20px;
}

.flip-container .top,
.flip-container .icon-holder,
.front .top,
.front .icon-holder,
.back .top,
.back .icon-holder {
  background-color: #777777;
  color: #fff;
}

.flip-container .icon-holder,
.front .icon-holder,
.back .icon-holder {
  margin: -25px auto 0;
  border-radius: 50%;
  border: 6px solid #fff;
  width: 50px;
  height: 50px;
  padding: 7px 10px 10px;
  font-size: x-large;
}

.front.success .top,
.front.success .icon-holder,
.back.success .top,
.back.success .icon-holder {
  background-color: #23AE89;
  color: #fff;
}
/* flip speed goes here */

.flipper {
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */

.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */

  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
Froelund
  • 33
  • 4
  • Can you please provide us the code you tried so far? Else we're not able to help you. Or it would be too difficult :) – roemel May 02 '15 at 17:21
  • you forgot to put the codepen link in your question – Tasos May 02 '15 at 17:22
  • If you are using Bootstrap add `clearfix` class to container or else simulate clearfix class. – vinayakj May 02 '15 at 17:54
  • Thank you @vinayakj for your contribution. I have tried to add the clearfix class, to .flip-container, from the ionic.css http://code.ionicframework.com/nightly/css/ionic.css but with no success. – Froelund May 02 '15 at 18:10
  • can you please try with .back and .front and remove manual height attribute. – vinayakj May 02 '15 at 18:14
  • Yes. That "kind of" solves the problem, however when there is multiple cards, they just pile up on each other. I have expanded the example with an additional card. @vinayakj you should be able to test your suggestions in codepen. – Froelund May 02 '15 at 18:17
  • yes they would pile because you are using position relative to .back and .top try using relative postion – vinayakj May 02 '15 at 18:27
  • @vinayakj .front and .back is meant to be stacked on top of each other - Thats why they are positioned absolute. – Froelund May 02 '15 at 18:37
  • what about the flipper class – vinayakj May 02 '15 at 18:43
  • @vinayakj The .flipper is relative. Did you see the codepen project? http://codepen.io/Froelund/pen/gppBvX – Froelund May 02 '15 at 18:47
  • On codepen the ionic.css is loading the class clearfix empty, so try it on your local. Add clearfix class to flipper and remove height: 180px; – vinayakj May 02 '15 at 18:49
  • Also look http://stackoverflow.com/questions/9543541/what-does-the-clearfix-class-do-in-css – vinayakj May 02 '15 at 18:59
  • Yes @vinayakj. I have added the .clearfix to flipper, and removed the height: 180px; Now the elements are not full height. I can only see the .top of the front. – Froelund May 03 '15 at 11:58

0 Answers0