Button collection menu size

Button collection menu size

datpetedatpete 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?

Replies

  • datpetedatpete Posts: 6Questions: 1Answers: 0

    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;
            }
    
  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

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

    Allan

Sign In or Register to comment.