Button collection menu size
Button collection menu size
datpete
Posts: 6Questions: 1Answers: 0
I am trying to reduce the size of a button collection defined as such:
buttons: [
{
extend: 'collection',
collectionLayout: 'dropdown',
text: "Export",
buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ],
}
]
I have searched for solutions, and most suggest working with font-size, padding and width within CSS styles
.dt-button-collection and .dt-button
E.g.
.dt-button-collection {
width: auto !important;
font-size: 6px !important;
padding: 0px !important;
}
.dt-button-collection .dt-button {
font-size: 6px !important;
padding: 2px 4px !important;
}
This makes the menu items (very) small, but the menu button is still the full size.
The only way I have succeeded to reduce the size of the menu button itself is by using
.dt-buttons {
zoom: 70% !important;
}
but then the dropdown menu appears in the wrong position, when I click the menu button.
Any other suggestions?
This discussion has been closed.
Replies
With some more fine tuning I ended up with this, which looks ok to me:
Looks good - nice one and thanks for sharing that with us.
Allan