CSS bubbling while using jQuery Quicksand

Question

I'm using jQuery Quicksand to create a filterable portfolio of articles:

The problem is, when the filters in the sidebar paragraph are clicked (video, websites, motion graphics), the CSS is doubled on the articles that are being filtered and aren't properly positioned until the animation is complete. The plugin is adding top: 60px; left: 416px; to the first article in the filtered set, pushing everything over.

Keep clicking website to see the effect.

I believe this is the offending CSS, but I'm not sure how to adjust it so that it plays nice with the plugin:

article.project-container {
    float: left;
    position: relative;
    margin: 5px;
    padding: 10px;
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

Visit http://razorjack.net/quicksand and click the filters (everything, applications, utilities) to see the intended effect.

Any help would be much appreciated!

Eliran Malka · Answer 1 · 2012-04-24T20:32:22.497

0

rewrite your rule as follows:

article.project-container {
    float: left;
    position: relative;
    top: 5px !important;
    left: 5px !important;
    margin: 5px !important;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

the !important declarations are used to override the plugin's rules.

(background is also re-written as specifying a shorthand for a single property is redundant).

edited Apr 24 '12 at 20:32

answered Apr 24 '12 at 16:58

Eliran Malka

15,821
6
77
100

were you able to get this working with this css? I tried plugging it in and the effect doesn't work as anticipated – Dave Kiss Apr 24 '12 at 17:43
also, the `float: left;` is necessary - i'm having multiple items appear next to each other, and it is valid css: http://stackoverflow.com/questions/2635426/css-position-relative-and-float-left – Dave Kiss Apr 24 '12 at 17:54
yes, i was able to get this to work considering the state of the website at the time of the post, and assuming multiple items, the `float` does make sense. – Eliran Malka Apr 24 '12 at 20:31
the website is in the same state as before - the only edit has been the `article.project-container` to your suggested css – Dave Kiss Apr 24 '12 at 20:40
well, seems fine to me. you can be more descriptive as to what is the *desired result*. – Eliran Malka Apr 24 '12 at 20:43
sorry, please visit the plugin page: http://razorjack.net/quicksand/ and click the filters (everything, applications, utilities) to see the intended effect – Dave Kiss Apr 24 '12 at 20:46
no need to be sorry. please edit your question to contain these instructions. – Eliran Malka Apr 24 '12 at 20:48
try and replicate the conditions from the QuickSand demo: use `ul` and `li` instead of `section` and `article` - its not semantic anyhow, clean all added CSS, and so forth. – Eliran Malka Apr 24 '12 at 21:00

score 0 · Accepted Answer · answered Apr 24 '12 at 21:51

From the official github page....

Quicksand uses position: absolute to animate the elements. This means that the container can't use absolute positioning because it breaks Quicksand's calculation of coordinates. After I tried to disable position: absolute in your section.thumbs, Quicksand started to work flawlessly. And since your layout doesn't seem to need this kind of positioning (regular floats will do the job), this will fix the issue.

CSS bubbling while using jQuery Quicksand

2 Answers2

Linked