Search code examples
javascriptcssgoogle-chromedeveloper-tools

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


Solution

  • 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/