Fail when rows collapse

[NeoMudaly]

When a row of blocks collapses to 100% width at a CSS breakpoint, Equalizer assigns an incorrect height to all blocks. This makes sense as they're no longer in a row, but this also causes the blocks to be cutoff or oversized.

Limiting instantiation of the plugin at a viewport size, while still retaining resizeable:true would work, if I knew how to pull it off.

Any other ways to work around?

[Mottie]

Could you please share a demo of this issue. Here is a demo that you can build on.

[NeoMudaly]

It seems after fiddling that it may be more of a CSS problem....
When the markup is a little more complex, floats inside the EQ'd container escape when the row collapses:

http://jsfiddle.net/Neo360/ws4qS/29/

Only the first column has a float inside the EQ'd container. Resize the window under 400px and the container collapses.
I've tried containing the float but no luck.

[Mottie]

Hmm, if you change the columns option to target the div instead of the a, it appears to work (demo):

columns : '> div'

[NeoMudaly]

I decided to crudely wrap the plugin in a media query. This way when the screen resolution is below a set limit the plugin sets height:auto. In my case it's not necessary to have equalization when the columns collapse and this is where the issue arises. Do you think it makes sense to add this an option?

[Mottie]

So you mean an option which stops equalizing when the browser window is less than a set width? That sounds reasonable.

[NeoMudaly]

Yeah,

I also just noticed other floated divs escaping even when columns are present and I think it's more to floats escaping this:

<span class="equalizer-inner" ></span>

I added clearfix to equalizer-inner and it works : )

<span class="equalizer-inner" style="display:block;margin:0;padding:0;overflow:hidden" />

also works.

[Mottie]

Check out the new adaptive demo.

Note that the new breakpoint option targets the outer wrapper. So if the wrapper happens to be the same width as the browser window, you can use media queries instead of adding definitions to the class name added by the disabled option. I've added some basic documentation which gives a little more detail.

Hopefully that will get the plugin to work the way you want.

[NeoMudaly]

@Mottie I've just gotten an opportunity to try this out and it works just as expected and brilliantly so. Thanks.