troubleshooting Question

How to customize DataTable custom button collection menu?

Avatar of Starr Duskk
Starr DuskkFlag for United States of America asked on
CSSJavaScript
3 Comments1 Solution160 ViewsLast Modified:
I am using the custom buttons for the dataTable located here: https://datatables.net/reference/button/collection

I am using two of the collection buttons, but I need the menus to be a different size. I am having trouble adding in css code that customizes the dropdown menus for the button collections. Here is the code here for the dataTable.
var selectedExcelButtonText = "Excel";
  $('#TableTeamGrid').DataTable( {
buttons: [{ extend: 'collection', text: selectedButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataSortBy' }, buttons: [{ text: 'Alphabetical A to Z', action: function(e, dt, node, config) { dt.order( [2, 'asc'] ).draw(); selectedButtonText = "Alphabetical A to Z "; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>');}}, { text: 'Alphabetical Z to A', action: function(e, dt, node, config) { dt.order( [2, 'desc'] ).draw(); selectedButtonText = "Alphabetical Z to A"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Newest Hire to Oldest', action: function(e, dt, node, config) { dt.order( [9, 'desc'] ).draw(); selectedButtonText = "Newest Hire to Oldest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Oldest Hire to Newest', action: function(e, dt, node, config) { dt.order( [9, 'asc'] ).draw(); selectedButtonText = "Oldest Hire to Newest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Highest to Lowest', action: function(e, dt, node, config) { dt.order( [8, 'desc'] ).draw(); selectedButtonText = "Score Highest to Lowest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Lowest to Highest', action: function(e, dt, node, config) { dt.order( [8, 'asc'] ).draw(); selectedButtonText = "Score Lowest to Highest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } } ]
},
buttons: [{ extend: 'collection', className: 'stylExportMenu', text: selectedExcelButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataExportCollection' }, buttons: [{text:'Export Excel', attr: { id: 'dataExcelBtn' }, action: function(e, dt, node, config) { document.getElementById('btnExcel').click(); } }, {text:'Export CSV', attr: { id: 'dataCSVBtn' }, action: function(e, dt, node, config) { document.getElementById('btnCSV').click(); }}],
});

I tried to remove the information that wasn't relevant to the question, so in my removal of code I might have accidentally taken out a bracket or parenthesis that was needed, but the buttons themselves are working.I just need to style the dt-button-collection menu.

I just need help figuring out how to customize the width of the menu for the second collection #dataExportCollection. It needs to be a smaller menu size than the #dataSortBy collection. I have tried:

.dt-button-collection:nth-child(1) {
     width: 100px !important;
}
and
.dt-button-collection:nth-of-type(1) {
     width: 100px !important;
}
The first one didn't work at all and the second one applied it to both menus. I think because only one menu is ever showing at a time.

I also can't target the button collection like this:
#dataExportCollection > .dt-button-collection {
width: 100px !important;
}
because the .dt-button-collection menu is not inside the same container as the button or inside any type of container that I can assign a different id to than the other collection menu. Does anyone know of a way that I can customize this second menu so it doesn't have the same long width of the first menu?
ASKER CERTIFIED SOLUTION
lenamtl

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros