germanysbestkeptsecret / Wookmark-jQuery

A jQuery plugin to create a dynamic, multi-column layout.
MIT License
2.63k stars 759 forks source link

Wookmark layout broken (for me, at least) #179

Closed mikerockett closed 9 years ago

mikerockett commented 9 years ago

So I've just started using Wookmark for a charity site, on a page where I'm listing Board Members.

Unfortunately, something is breaking Wookmark, and I can't figure out what it is. (It may well be my grid system, which is http://matthewhartman.github.io/base/, but that would just be weird.)

I have the following HTML (PHP):

<ul class="wookmarkItems">
    <?php foreach ($page->board_member_details_group as $member): ?>
        <li class="wookmarkItem">
            <h2><?= $member->board_member_name ?></h2>
            <p class="position"><?= $member->board_member_position ?></p>
            <div class="bioProfile"><?= $member->board_member_profile ?></div>
        </li>
    <?php endforeach; ?>
</ul>

The following LESS:

ul.wookmarkItems {
    font-size: 16px;
    position: relative;
    list-style-type: none;
    margin: 0;
    li.wookmarkItem {
        .border-radius(3px);
        background: #f5f5f5;
        display: none;
        font-size: 0.95em;
        width: 210px;
        [...]
    }
}

And the following JS (CoffeeScript shown here):

## @void
Plugin_Wookmark_Initiate = (Target) ->
    $ Target
        .wookmark
            autoResize: false
            container: $ Target
            itemWidth: 210
            offset: 3
    return
#/Plugin_Wookmark_Initiate

$ -> # (on document ready)
    Plugin_Wookmark_Initiate "ul.wookmarkItems li.wookmarkItem"

The width of each li sets at 210, but each one goes beneath the other, and doesn't use columns (all items appear in 1 column).

If I remove container from the options, then each li sits next to the other, and continues past the end of the page. In addition, and if container is removed, then the height of the ul sets at 0, and the footer of the site goes underneath the lis. If I then add overflow: hidden to the ul, all the items disappear.

wookmark-bug

Also, and as you can see by the image, even though I've set the margin to 0 on ul, it's still there, which means it's being added...

Any idea why this is happening?

Sebobo commented 9 years ago

Hi,

The container must not be Target. It should be the container of the .wookmarkItems.

This will be simplified in the next release.

Regards