Is it possible to target specific dt-button-collection dropdowns in css ?

desperado

https://jsfiddle.net/gouldner/zb0cd63m/

This example has three dt-button-collections so when I make one of them wider they all get wider which is not what I want.

The three in this example are
1. StateRestore - which I want to make wider and keep the drop down below the button.
2. ColumnVisibility - which I don't want to be wider and I want to display on top of the button not below since the button is on the bottom of the page
3. PDF Print Option - which like ColumnVisibility I want to NOT be wider, and I want to display above the button not below.

Col-Vis adds a unique class to the buttons only not the collection. Namely buttons-columnVisibility. It would be nice if StateRestore did this also and it would be useful if each of the collections could have their own class.

Is there a way to add classes to these when I extend them ?

sandy

Hi @desperado ,

Yes you can use the buttons.buttons.className initialisation property to set a class name on a button.

I don't think there is currently a way to set a class on the dt-button-collection divs, but I will ask Allan when he gets in and respond back here.

Thanks,
Sandy

allan

You could (mis)use the collectionLayout option for the collection button. It basically just adds a class to the .dt-button-collection element. We have a few pre-set options for it in our CSS, but you could actually use any string you want for it.

Allan