CSS conflict/issue

[devildog67]

I have a page that is actually four DIVS being shown/hidden as the user clicks the "next" button. I'm trying to use the columnizer on the second "page" to columnize a list of checkboxes.

This is the CSS code that controls which "page" is being shown. When the user clicks the next button the JS code removes the "current" class from the DIV the user can see and adds it to the next DIV etc.

.page { display: none; margin: 20px 0 50px 0; }.page.current { display: block; }

This is the JS line that adds the "current" class to the second DIV:

$next.addClass("current");

When I step through the code there are no errors. The DIV for page 2 contains the "current" class yet it's not visible.

When I view the page source I can see all the checkboxes are in the DIV but they're not visible.

I'm thinking there's some kind of conflict with the columnizer code. Can you help me with this?

Thanks Pablo

[devildog67]

I think my issue is related to this issue....

https://github.com/adamwulf/Columnizer-jQuery-Plugin/issues/118

[adamwulf]

just updated w/ a comment over there. the short story is columnizer can't run w/ display:none. i'd recommend setting the content to visibility: hidden; during columnizing. after it's done columnizing you can reset the CSS to display none and all should work just fine.