Bootstrap 4 - buttons remain secondary also if overriden with primary

Bootstrap 4 - buttons remain secondary also if overriden with primary

carlopcarlop Posts: 37Questions: 9Answers: 1

Hello, please refer to
https://www.nfctech.eu/datatables-bootstrap4-button-lenght/testcase/
that make use of the last version of Datatables package.
https://datatables.net/download/#bs4/jszip-2.5.0/dt-1.10.18/e-1.9.0/b-1.5.6/b-html5-1.5.6/fh-3.1.4/r-2.2.2/sl-1.3.0
The excel button still appears as secondary (see attached image) also if it as been overwritten as btn-primary

buttons: [
          {extend: 'excel', title: null, text: '<i class="far fa-file-excel"></i>',
            exportOptions: {
              columns: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              modifier: {selected: null}
            },
            className: 'visible-lg-inline-block btn-primary'
          }
        ]
} );

Any suggestion to solve this issue?
Thanks

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    Hi @carlop ,

    This SO thread here has a couple of solutions - one is to remove the class in the buttons.buttons.init, the other is to change the classname in buttons.dom.button. Hope that does the trick for you,

    Cheers,

    Colin

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Hi Colin, thanks, it worked.
    Why the previous method of just adding the class in

    buttons: [
              {extend: 'excel', title: null, text: '<i class="far fa-file-excel"></i>',
                exportOptions: {
                  columns: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                  modifier: {selected: null}
                },
                className: 'visible-lg-inline-block btn-primary'
              }
            ]
    } );
    

    does not work anymore?
    Thanks again.

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin

    The class name gets added, rather than overridden. If that worked before, it was a bug :).

    Allan

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    Hi Allan, I found another solution envisaged by you in a previous discussion
    https://datatables.net/forums/discussion/43723/how-can-i-remove-default-button-class-of-datatable-btn-default
    that is

    $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn';
    

    for Datatables

    $.fn.dataTable.Editor.classes.form.button = "btn";
    

    for the Editor form
    It works fine and according to me has the advantage of a simple and compact code.
    Is this solution still deemed acceptable also with Bootstrap 4?
    Thanks

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin

    Yes - that looks spot on!

    Allan

This discussion has been closed.