Multi-Level Collection Syling

cbtdev

Hello,

I have a couple of questions regarding styling of multi-level button collections. I am in the process of building a menu style button with several levels of collections. For example, I have one button called "Table Actions". Clicking this button will open a collection of buttons. Several of these buttons open their own collections (i.e. Column Vis, Page Length, etc.). See screenshot

Question 1

Is there a way to add a class to a specific collection container and/or its buttons, especially for pre-built buttons? For example, the Column Visibility container has the buttons-columnVisibility class for each of its buttons. However, the Page Length container does not. I need to be able to style the Page Length buttons specifically and am not sure how do accomplish this. I did look into buttons.dom but it seems that this is a global setting for all buttons/containers.

Question 2

On the Multi-level collections example it's noted that only a single collection can be shown at a time. This is certainly fine for what I am trying to do, however, when I click on a button to open a sub-collection (like Column Vis), the sub-collection is rendered relative to its parent button and it causes a gap between the sub-collection and the main menu button (see screenshot). Is there a way to force it to render relative to the root (Table Actions) button?

Any help you can provide would be greatly appreciated!

Thanks,
Kurt

allan

Hi Kurt,

Is there a way to add a class to a specific collection container

Not really - you can add a class to all containers, but not to a specific one - there isn't an API for that I'm afraid. However, you can add a class to each button using the buttons.buttons.className option.

For the page length buttons its a little more difficult since they are being automatically generated from the list of page length options. I agree that there is a discrepancy between the page length and column visibility there and that it would be useful to be able to address the page length buttons in CSS, so I've just added a button-page-length class to the page length buttons.

The nightly will rebuild with that change soon.

Is there a way to force it to render relative to the root (Table Actions) button?

It should actually be doing that already - with a small offset to try and indicate that it is a sub-collection. Here is a modification of the example in the link you gave with the sub-collection triggering button at the bottom: http://live.datatables.net/besejofo/1/edit .

Could you give me a link to your page so I can try to figure out what is going wrong please?

Thanks,
Allan

cbtdev

Hi Allan,

The new class for the page length buttons works perfectly, thank you!

As for the second issue, the page in question is behind authentication. However, it is on our test system so I will talk to my manager and see if I can get you some credentials. If so, I will PM you the details.

Thanks again for all of your help!

-Kurt

allan

Hi Kurt,

Thanks for the PM - when that I found that the issue was with how Buttons operates with Foundation. I've just committed a fix for this and it will be in the nightly versions of Buttons in about 5 minutes.

Regards,
Allan

cbtdev

Hi Allan,

That works perfectly, thank you so much! I apologize, I should have mentioned in my initial post that we were on Foundation.

Thanks again for the quick turnaround!

-Kurt