marlenesco/material-cards

Using material-cards with Masonry plugin = fail

Closed this issue · 6 comments

dimavolo commented

Thanks again for your help with my previous issue! I've been struggling for over a week to get material-cards to work well with the Masonry layout plugin, found at: http://masonry.desandro.com/.

This is probably not any sort of problem with your wonderful work, but rather something I'm doing incorrectly when integrating with Masonry. Nevertheless, I wonder if you'd be able to help.

The issue is that cards appear extremely tall and empty, so that they push down other cards. They also overlap other cards when opened.

I'm attaching a screencast to demonstrate the problem.

Problem With Masonry.mp4.zip

Would you mind taking a look and letting me know if you have any suggestions? You can check out live HTML at http://KoreanBeauty.online, which is a previous version of what I was working on before integrating with Masonry.

dimavolo commented

Oh! Just as background info... why am I using Masonry with Material Cards at all?

It's because I want to responsively have cards fill heights when they are opened. Here's a screencast showing the problem I was aiming to solve with Masonry. Any chance you can solve the problem within the plugin itself, rather than by using Masonry?

Thanks again!

Empty White Space.mp4.zip

marlenesco commented

Hi @attentiondmi, have you tried to refresh masonry layout after shown.material-card and hidden.material-card event?
http://masonry.desandro.com/methods.html#layout-masonry

Otherwise, send me a zip file with a working layout, I want fix it.

Please let me know.
Cheers

dimavolo commented

Thanks @marlenesco! I have tried to refresh masonry layout, but even before the cards get shown or hidden, the layout is strange.

I am writing my project in Node.js, which calls on .jade templates.

The three relevant files are:
/views/layout.jade
/views/index.jade
/public/javascripts/dvProductCards.js

It would be wonderful and very appreciated if you could take a look and let me know what I'm doing wrong.

Please find the .zip of my entire project here: https://db.tt/S3Fxjul5

And thanks again!

marlenesco commented

Hi @attentiondmi, sorry for my late reply, I was too busy with work.
I downloaded your project but I'm having some trouble finding out what's wrong. I've prepared a demo that I hope can help you 30f7486.

Check demo/material-cards_jquery-plugin_masonry.html an example of Masonry grid library integration with material cards.

Html:

any .grid-item contains a .material-card, .grid contains all .grid-item

<div class="grid">
    <div class="grid-item">
        <article class="material-card Red">
            ...
        </article>
    </div>
    <div class="grid-item">
        <article class="material-card Blue">
            ...
        </article>
    </div>
    ...
</div>

Javascript

after shown.material-card and hidden.material-card events rebuilt layout with .masonry() method

$(function() {
    var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 390,
    });

    $('.material-card').materialCard();

    $('.material-card').on('shown.material-card hidden.material-card', function () {
        $grid.masonry();
    });
});

Css

additional css style in head for .grid-item elements

.grid-item {
    width: 390px;
    padding: 15px;
}

Let me know.
Cheers

senaygui commented

thanks, it worked for me

On Wed, May 11, 2016 at 2:01 AM, David Foliti notifications@github.com
wrote:

Hi @attentiondmi https://github.com/attentiondmi, sorry for my late
reply, I was too busy with work.
Check demo/material-cards_jquery-plugin_masonry.html an example of
Masonry grid library integration with material cards.

Html:

...
...
...

Javascript

$(function() {
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 390,
});

$('.material-card').materialCard();

$('.material-card').on('shown.material-card hidden.material-card', function () {
    $grid.masonry();
});

});

I hope that it works for you, let me know.
Cheers

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#4 (comment)

marlenesco commented

@senaygui I'm glad that it works