Last column never used

[thinkbigsoftware]

I'm trying to create a menu with 6 columns but no matter how many items I add it only ever uses 5 columns. It always creates a new row before using the last column. I'm using:

$('.dropdown-menu').columnize({ columns:6, buildOnce:true });

Could you please let me know if there are any common issues that could be causing this? Sorry, I can't post the link as it's a password protected, clients site.

Thanks

[adamwulf]

what do you mean it creates a new row? it's making 2 rows of 5 columns instead of 1 row of 6 columns? if so, it sounds like a CSS issue that's kicking the last column from its float down to the next row. check the padding/margin/width of the rows + container

[thinkbigsoftware]

Yes, I have 5 rows of 5 columns. Looking at the html, there is a 6th column but it is always empty. Even when I remove all the stylesheets the problem remains.

FYI - I'm using an ordered list. So the last column never has any li's added to it.

Thanks

[adamwulf]

can you post the url or a jsfiddle?

[thinkbigsoftware]

Thanks for the quick reply.

I can't post a link but I've recreated the problem here: http://jsfiddle.net/RLuc9/4/

I need to use 7 columns but the last column is always empty. Any ideas would be welcomed!

Thanks.

[adamwulf]

on line 623 of columnizer, can you try adding ~10 or 20 instead of 30 to target height?

so

}else if(max - min > 30){
    // too much variation, try again
    targetHeight = avgH + 30;
}

becomes:

}else if(max - min > 20){
    // too much variation, try again
    targetHeight = avgH + 30;
}

[thinkbigsoftware]

Unfortunately that doesn't fix it.

Currently it's using 5 of 7 cols. Changing this value to 15 uses 6 of 7 cols. I tried a range of values here but none of them used all 7 cols.

[SchwarzwaldFalke]

Is there another possible fix for this? I have the same problem on my website.

Thanks!

[adamwulf]

I think the issue stems from empty

having a different default height than one with text in it. adding CSS so that the min-height of the

matches an

with text may help.

Additionally, adding "dontsplit" class to the

seems to solve the issue for me: http://jsfiddle.net/RLuc9/13/