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

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

desperadodesperado Posts: 159Questions: 33Answers: 4
edited December 2021 in Buttons

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 ?

This question has an accepted answers - jump to answer


  • sandysandy Posts: 913Questions: 0Answers: 236

    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.


  • allanallan Posts: 58,324Questions: 1Answers: 9,334 Site admin
    Answer ✓

    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.


Sign In or Register to comment.