Single Div Sizing Affecting Spacing of Everything Else

[dggsax]

Heya,

So I'm making a web application that implements shapeshift to a bunch of dynamically generated elements, each generated from their own plugin/library/code I've written, etc. Essentially, my system builds each element (which I'll call modules from here) to a certain div, and then I call shapeshift on that div. One library in particular that I'm implementing is nipplejs.js. There's something interesting going on...

Essentially, for every nipple that is generated I have to specify the height and width of it's container (plus some padding so that when I unlock the page I can drag nipples around as well as other things). When nipplejs.js makes the nipple it appends it to a div that was pre-appended to the div where I'm building everything (and calling shapeshift on). This then modifies the "order" of everything so the nipples go first. Shapeshift is then, I think, reading the height/width of the nipple (which is first in the order of modules) and then using that to set the spacing for everything else. Here is a picture of what I am describing: If I don't build the nipples, everything works fine: Any thoughts?

Thanks in advance,

Daniel

[dggsax]

@McPants Any thoughts?

[AshesOfOwls]

@dggsax Fun project name :)

If I understand you right, it seems like you are wanting to add items to a collection after Shapeshift has already been instantiated.

This will work - I would recommend just destroying the previous Shapeshift instance and create a completely new one immediately after. It should be fast enough that there is no change in DOM position from their original points.

I hope this helps.