How can I use dropdowns in a masonry layout?

Question

I am using a layout list with Masonry (and animOnScroll on top of it). I want to add bootstrap dropdowns to my list items, but Masonry inserts directly into every dropdown <li> DOM node a style="position: absolute; left: 0px;" .

I am already overriding animOnScroll CSS rules for <li> items (the selector .grid li{ was matching my dropdown items).

However, I can't figure out how to remove these direct styling properties or why they appear in each dropdown <li> as style="position: absolute; left: 0px;"

Answer 1

Masonry provides an item-selector option to avoid this kind of issues. I knew it but it turns out that AnimOnScroll add its own options when directly instantiating Masonry. The faulty lines were then, in AnimOnScroll:

self.masonry = new Object(new Masonry( self.el, {
                itemSelector: 'li',
                transitionDuration : 0
            } ));

It should be instead:

self.masonry = new Object(new Masonry( self.el, {
                itemSelector: '.grid-item',
                transitionDuration : 0
            } ));