Button collection menu size

datpete

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?

datpete

With some more fine tuning I ended up with this, which looks ok to me:

/* Make the dropdown menu of buttons slightly smaller */
        .dt-buttons {
            font-size: 12px !important;
        }
        div.dt-buttons span.dt-button-down-arrow
        {
            top: 0px !important;
            line-height: 0.8em;
        }
        .dt-button
        {
            padding: 0.35em 1em !important;
        }
        .dt-button-collection {
            width: max-content !important;
            padding: 5px !important;
        }
        .dt-button-collection .dt-button {
            font-size: 12px !important;
            padding: 5px 10px !important;
        }

allan

Looks good - nice one and thanks for sharing that with us.

Allan