Flippy element height about angular-flippy HOT 6 CLOSED

hey @adyba, I can't say I fully understand.
Dou you maybe have a codepen/plunkr/xyz for me to look at?

from angular-flippy.

Well my solution works only for Ionic. I'm (ab)using $ionicView.enter event that is fired after all the DOM of the controller is properly rendered so I don't have the good solution for a "naked" Angular.

To describe the problem I did my best to draw a picture to explain it.

The dark blue rectangle is your <flippy> element that has inherit (in reality ZERO) height.
It's content <flippy-front> and <flippy-back> overflows the <flippy> and does all the magic.

Unfortunately any further content (the red rectangle) is displayed just after the <flippy> and thus possibly hidden behind the overflowing content. Once you know the real height of the content (front&back) there is no issue. But once the content is dynamic you are in trouble.

I believe there must be a CSS solution (clearfix, clear:both) but all my attempts failed. I'm anything but no CSS expert so I have used oldschool JS.

from angular-flippy.

I still didn't understand your issue completely 😓. If you could create a tiny codepen/plunkr/jsbin for just this case would help a lot.

from angular-flippy.

Just put a <div id=" style="border: red 3px solid;">Can you see me?</div> just after the </flippy> in you jsbin example and you will find what I mean. Once the width of the output viewport is narrow like on mobile, the content of flippy covers the red div completely.

from angular-flippy.

you mean like http://jsbin.com/fusoyizuya/1/edit?html,js,output ?

In that case, you could put the display: inline-block; style and it won't be overlapped by flippy itself.
Did I understand the issue now?

from angular-flippy.

closed due to no response by issuer.

from angular-flippy.