Overlapping Flips

[dukesaeed]

Very nice library , I'm using it with Bootstrap Row and Columns putting some Flip Divs in Bootstrap columns , puts all Flip Divs on each other What should be changed?

[Download]

Bootstrap styles on columns don't interact well with the flip styles. Instead of trying to flip the column directly, please use an extra div between the column and the flippable content:

<div class="col-md4 col-sm-6 col-xs-12">
  <div class="flip"><img src="..." /></div>
</div>

Also see Conflict with bootstrap #12

[dukesaeed]

Thank you for answering this I did as you said but still no chance :

 <div class="row">

        <!--column 1-->
        <div class='col-md-4'>
            <div class='flip'>
                <div class='front'>
                    <img src="http://lorempixel.com/450/300/technics/1" />
                </div>
                <div class='back'>
                    <img src="http://lorempixel.com/450/300/technics/1" />
                </div>
            </div>
        </div>

        <!--column 2-->
        <div class='col-md-4'>
            <div class='flip'>
                <div class='front'>
                    <img src="http://lorempixel.com/450/300/technics/2" />
                </div>
                <div class='back'>
                    <img src="http://lorempixel.com/450/300/technics/2" />
                </div>
            </div>
        </div>

        <!--column 3-->
        <div class='col-md-4'>
            <div class='flip'>
                <div class='front'>
                    <img src="http://lorempixel.com/450/300/technics/3" />
                </div>
                <div class='back'>
                    <img src="http://lorempixel.com/450/300/technics/3" />
                </div>
            </div>
        </div>

    </div>

when I comment out the position:absolute in flip.js , columns show correctly but front and back images are positioned above each other

[Sartoric]

Did you tried using fixed height for flip elements ? Look at this : http://jsfiddle.net/L30bkLsb/1/

I'm using flip in a website with foundation and masonry and fixed height did the magic :smile:

[dukesaeed]

Hey boy, You saved my day .... At first look it seems totally OK, I'll inform within a day if any defect comes in thank you very much

[Sartoric]

You're welcome. I'll send you soon the bank transfer details :smile:

[JemarJones]

Yeup that fix makes sense. If you look at the original fiddle and inspect element you'll see the actual flip element had 0 height, and yet the images had the appropriate height. That's why you were getting weird behavior.

[dukesaeed]

:)) It Works as expected ... Thanks everyone ...