Angular Datatable - override button CSS

Question

I use angular 5 and angular-datatable.

I want to apply "btn btn-success" class on custom button

This is what I tried :

this.dtOptions = {
     ...
 buttons: [
     {
       text: 'Sélection',
       className: 'btn btn-success',
       ...
     }
  ]
}

This is the result :

The class is added but it keeps 'dt-button' class before that overrides some attributes as you can see on image

But I don't find how to remove it...

How can I solve it ?

anakin59490 · Accepted Answer · 2018-09-13 08:38:44Z

2

Ok I found :

 this.dtOptions = {
 dom: 'Blfrtip',
 initComplete:  function (settings, json) {
    $('.button').removeClass('dt-button');
 },
 buttons: [
    'print',
    'excel',
     {
          text: 'Sélection',
          className: 'table-button button btn btn-success',
          ...
        }
     ]
}

Now It works !

answered Sep 13, 2018 at 8:38

anakin59490

6721 gold badge12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cigien · Accepted Answer · 2022-04-10 13:42:42Z

0

I had a similar issue in Angular 13 and Bootstrap 5 and was able to resolve it as follows:

initComplete: function (settings: any, json: any) {

    $('button').removeClass('dt-button');
    $('button').removeClass('buttons-excel');
    $('button').removeClass('buttons-html5 ');
      
  },
  buttons: [{
    extend: 'excel',
    text: 'Exportar',
    className: "btn btn btn-dark float-end",
  }],

button color change

If the styles are not removed first, the one you want to apply does not apply.

edited Apr 10, 2022 at 13:42

cigien

61.2k11 gold badges86 silver badges124 bronze badges

answered Apr 10, 2022 at 1:18

Jorge Eldis

1

Collectives™ on Stack Overflow

Angular Datatable - override button CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related