Issue with Column Selector widget
Hello,
I found a column selector widget that works exactly the way I want, but I'm having some trouble with implementation. Here is the widget:
http://jsfiddle.net/3pS6v/5/
The little column button that pops up with the selector is what I'm trying to adjust. The table has an existing toolbar with an icon, and when users click the icon I want it to come up with the column selection list. However, it's not doing that for some reason. If I put the button in a div elsewhere though, it works fine.
Everything on the above page is the same, the only difference is the markup where the 'column' button is. Instead of having it standalone, it sits in a link within a toolbar:
<code>
<span class="icon view"><i class="icon-view"></i></span>
</code>
When clicked, the 'icon-view' class is configured to open in a div called 'view-menu'. This div is set up here:
<code>
<div class="view-menu">
<input id="colSelect1" type="checkbox" class="hidden" />
<label class="columnSelectorButton" for="colSelect1">Column</label>
<div id="viewMenu"></div>
</div>
</code>
Now, when clicking the icon in the toolbar the checklist of available column names shows up fine, but no longer works. Checking and unchecking the boxes has no effect on the table. If I change the "view-menu" div's class to something else, the selector then works, but the checkbox list is displayed above the table where I don't want it.
I've looked at this for quite a while and can't figure out why it isn't working. I'd appreciate another set of eyes.