Using flip elements inside dynamically-sized containers

[alexweissman]

I'm trying to use flip inside a non-fixed size element. Unfortunately, the parent element doesn't seem to take the proper size around the flippable element. I believe this is because the flippable element uses position: absolute.

See http://jsfiddle.net/epbe44mw/2/ for an example. The entire background of the text should be gray (and indeed, it is when you remove the flip code).

Is there a way to deal with this nicely?

Reference issues: #12, #17

[Download]

When you remove the flip code, the front and back texts are placed below each other. Flip uses position:absolute to move the back content behind the front content.

Flip assumes that the flippable container has some dimensions... Because how would flip determine the dimensions of the flippable element otherwise? As you can see when you don't use flip, the dimensions of the grey area would be the height of the front + the height of the back... And that almost never what you want...

Please have a look at this modified fiddle. It explicitly sets up a height for the card. Then, Flip uses that to give the front and back elements their heights.

However, I have seen similar bugs to yours reported. People expect this to 'just work' apparently... I am not sure how to proceed with it actually. There are multiple scenario's and they are mutually exclusive somehow:

• No dimensions set on the flippable element (#card)
• Flippable element does have a dimension set

In the first scenario people expect Flip to look at the dimensions of both front and back panels and pick the largest one (i think) and use those dimensions In the second scenario people expect Flip to make the front and back panels expand to fill the entire flippable element (e.g. width:100%; height:100%).

Note that in the second scenario the dimension set does not have to be fixed. You can set a dimension on the parent of the flippable element and have the card grow or shrink with it. Have a look at this fiddle for example and try changing the height of the .container element.

[alexweissman]

Thanks!

If you'll notice in either fiddle you provide, if you narrow the viewport down to mobile sizes, the text overflows the flip card. I don't see any way that this could be resolved without using Javascript to dynamically detect the height of the various elements and size accordingly (which may or may not be in the scope of this project).

As for what is the "correct" behavior, I can see valid uses for either situation. If this were to be implemented in Flip, I'd probably use an initialization option like autoHeight.

I'm not sure I'd call this a bug, but either way I'd probably make some reference to it in the documentation.

[Download]

@alexweissman Yes I think the fact we already have a couple of bugs open on the same topic also suggests to me that some improvement is needed/could be useful.

I'd probably use an initialization option like autoHeight

We now have three (!) configuration options like that... autoSize, forceWidth and forceHeight. The force options are there to make Flip behave like it used to before adding support for dynamically sized flippable elements, whereas the autoSize option is there to allow the client to disable Flip from setting width:100%; height:100% on the front and back faces.

I'm not sure I'd call this a bug, but either way I'd probably make some reference to it in the documentation.

Would you be willing to try to see if you can come up with a pull request for either? It's my experience that the person that has the issue is often in the best position to improve the library to meet his needs. Flip is a pretty simple library so it might be a fun thing to do for you to make it your own. I'd be willing to assist you in it by answering your questions, reviewing your code and merging your pull request etc. Let me know!

[Download]

If you'll notice in either fiddle you provide, if you narrow the viewport down to mobile sizes, the text overflows the flip card.

Please have a look at this modified fiddle that solves that by adding a scrollbar. However I think what you want is for Flip to autoSize the element based on the size of the largest (front or back) face. I don't think Flip can do this at the moment. So if you can come up with a good solution for this that auto-sizes the flip to the height / width of the tallest / widest of the contained faces we'd welcome a pull-request. I think it would involve measuring the contained faces and taking action on it accordingly just before flip is applied for the first time.

[Download]

Closing this because of lack of activity. @alexweissman Please re-open if you still want to add something.

[alexweissman]

ok, yeah, perhaps someone with greater JS skills than I can tackle this at some point.