I've been racking my brain and scouring the internet for days with no luck finding a suitable solution to this problem. I'm working on a new website using Twitter Bootstrap. We're utilizing the Nav class and the default dropdown feature, but instead of a single column dropdown, we need a multi-column dropdown to accommodate numerous categories and subcategories without causing the dropdown to become excessively long and require scrolling.
To organize the data in columns (which are contained within a <ul>), I've implemented the use of jquery.columnizer.js, which has been quite helpful.
The issue at hand is this:
Due to the dropdown being hidden (using display:none), jQuery is unable to obtain the dimensions of the dropdown container. Consequently, the columnizer cannot perform its function.
My attempts to trigger the columnize function through a click event on the navigation item have proven ineffective on the initial click (only functioning properly after toggling the menu multiple times).
I prefer not to make modifications to the Bootstrap JavaScript and it appears that there isn't a straightforward solution within the columnizer plugin either.
So, how can we ensure that the columnize function ($('.myNavElements').columnize();) executes once the Bootstrap dropdown has been displayed?
EDIT:
Following the advice of the provided answer, the successful solution was as follows:
$(".dropdown").addClass("open");
$('.dropdown-menu').columnize();
$('.dropdown').removeClass("open");