Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

fitsRow layout mode in isotope and alignment big in Safari when I click a combobox

I am having issues with dropdown and isotope only in safari. Its working fine in chrome and firefox.

I have a dropdown and image in a block. I use overflow: hidden to hide image spill over in the box. And when I click on the dropdown in the box the entire content changes the alignment and aligns to the right.

This only happens when I use isotope script with fitsRow layoutMode. And this doesn't happen to any of the leftmost box somehow.

Here is the code:

Just click on the second box's dropdown, somehow the leftmost (1st one) doesn't have this issue ever.

http://jsfiddle.net/yJ3tn/

HTML

<div class="portfolioContainer clearfix">

                <div class="box">
                  <figure>
                    <a href="#">  
                        <img src="http://s15.postimg.org/r54k99mez/Wine_Tasting.jpg" alt="image">
                    </a>
                        <select class="selectfield">
                          <option value="0" selected>Choose Clip Board</option>
                          <option value="10704305">cuties</option>
                          <option value="-1">New Set</option>
                        </select>


                    </figure>


              </div>

              <div class="box clearfix">
                  <figure class="clearfix">
                    <a href="#">  
                      <img src="http://s15.postimg.org/r54k99mez/Wine_Tasting.jpg" alt="image">
                    </a>
                        <select class="selectfield">
                          <option value="0" selected>Choose Clip Board</option>
                          <option value="10704305">cuties</option>
                          <option value="-1">New Set</option>
                        </select>

                    </figure>

              </div>
            </div>

CSS

*,
*:after,
*:before {

    margin: 0;

}


.box {
    width: 177.574px;
    overflow: hidden;
    height: 300px;
    margin: 53px 29px 10px 29px;
    background-repeat: repeat;
    -webkit-box-shadow: 0 0 5px 1px #888;
    box-shadow: 0 0 5px 1px #888;
    border-radius: 10px;
    z-index: 2;
}


figure,img {
    height: 200px; 
}   

figure {
    position: relative;
}

SCRIPT

<script src="http://cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js"></script> 

 var $container = $('.portfolioContainer');
        $container.isotope({

            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            },

            layoutMode: 'fitRows',
              fitRows: {
                columnWidth: 240,
                rowHeight: 460

        }

        });
User Gravatar

user254

Posted Aug 26 2013 20:23 UTC

$5


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
    safari
  • 2205 Views

3 Replies


Hello user254,

You can use 'transformsEnabled:false', for such weird bugs in Safari:

http://jsfiddle.net/yJ3tn/5/

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Aug 26 2013 22:28 UTC

Solution

This didn't solve your task? Get your own custom solution.

Awesome Nikola! It works!

User Gravatar

user254

Posted Aug 26 2013 23:13 UTC

Bounty send!

User Gravatar

user254

Posted Aug 27 2013 16:24 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions