Datatable Editor Add/Edit/Delete visible and working but cannot style - Bootstrap 4

rhinosoft007

I have the licenced version of Editor and it is working well but for the life of me I cannot get the add/edit/delete buttons to display any larger or different colours.

It must be to do with my app, - .NET MVC and using a bootstrap template. A sample page does show the buttons correctly in the same app and I copied the same CSS/js setup code to a live page and buttons are shrunken - see image.

I had to of course include extra files to cater for the bootstrap page.

Here is my dom setting -> "dom": "<'row'<'col-md-4'l><'col-md-4'B><'col-md-4'f>> t <'row'<'col-md-6'i><'col-md-4'p>>",

I don't expect any debugging help yet (no samples) but if anyone has any thoughts on how best to debug this problem I would be grateful.

Thank you for any assistance.
Graeme

allan

Hi Graeme,

It looks like the Buttons / Bootstrap 4 Javascript integration file might not have been loaded? That will set the default classes and tags for Buttons to work nicely with Bootstrap 4. The download builder is the best way to make sure you get all the files you need.

Also, if you take this example as the basis for your table, adding specific classes to buttons can be done with their buttons.buttons.className option - e.g.:

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor, className: 'btn btn-primary' },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );

Allan

rhinosoft007

Thanks for the feedback Alan - I actually figured out the problem, now to work on the solution.

I use a bootstrap 4 enabled template called STACK which, after I removed a CSS file reference named theme.css the buttons and everything worked perfectly. Of course the page is totally messed up but at least I can focus on the fixes. This issue is reported on the WWW for other users so I am hoping to dig in an figure out what I can do.

I will post back here with my findings.

cheers.
Graeme