CODEWITHSUNDEEP
javascriptcssgoogle-chromedeveloper-tools
billy98111
billy98111

Reputation: 99

Chrome element.style cutting off images

As you can notice in the picture Chrome is sizing the height of the selected div to 55px. This is element.style which I think is calculated by a script and inserted into the html. 55px is not correct because it is cutting off the images so I want to make it 305px. The weird thing is, is that this ONLY happens in Chrome and works on IE and Firefox. Plus it doesn't happen when I am working on the html page locally in Chrome on my computer. I tried to override the 55px CSS rule by using !important but this doesn't do anything. I cleared my browser cache/cookies and re-uploaded the files but nothing. Chrome seems to correct itself and display is correctly when you make the browser window small then full screen again. Any help is appreciated.

enter image description here

Upvotes: 0

Views: 91

Answers (1)

nilsree
nilsree

Reputation: 302

In the /js/main.js file

Change this code:

$container.isotope({
    itemSelector: '.isotopeItem',
    resizable: false, // disable normal resizing
    masonry: {
        columnWidth: $container.width() / $resize
    }
});

To:

$container.imagesLoaded( function() {
    $container.isotope({
        itemSelector: '.isotopeItem',
        resizable: false, // disable normal resizing
        masonry: {
            columnWidth: $container.width() / $resize
        }
    });
});

This will hopefully make isotope wait for images to load.

EDIT: Imagesloaded is no longer included in the newest versions of isotope. You got an older version with Imagesloaded included, but if you were to upgrade to a newer version, you will have to use this one: http://imagesloaded.desandro.com/

Upvotes: 1

Related Questions