dom styling vs styles (some problem/conflict)

testownik

I'm using some default ccs/js files for customized buttons and styling (for styles: jquery-ui.css, dataTables.jqueryui.min.css, buttons.jqueryui.min.css), and I encountered a problem.

In init js, I have this line:

dom: 'lBfiptip',

And it seems to interfere with jqueryui style, in which some elements have darker background and probably larger distances between lines.

My guess is, that this can be somehow fixed, by formatting the dom option with other parameters. I'd like to keep the "lBf" as it is now, on white background, but I'd like add some formatting (class?) to "ip" segments. How to remake this don line to achieve that?

Yes, I saw this: https://datatables.net/reference/option/dom

But I'm unsuccesful with my experimentation for now.

kthorngren

Does this example represent what you are looking for?
https://datatables.net/extensions/buttons/examples/styling/jqueryui.html

My guess is you aren't using the Datatables Jquery UI integration files.

The dom option is more about placement of the elements rather than styling the elements.

Kevin

testownik

I have included these:

jquery-ui.css

dataTables.jqueryui.min.css

buttons.jqueryui.min.css

jquery-3.3.1.min.js

jquery.dataTables.min.js

dataTables.jqueryui.min.js

dataTables.buttons.min.js

buttons.colVis.min.js

and some js settings. if these settings include these:

```dom: 'lBfiptip',

```buttons: [

```{ extend: 'colvisGroup', text: 'some-buttons', show: [ 0, 1, 6 ], hide: [ 2, 3, 4, 5 ] } ]

then background formatting disappears. So my guess is, that the "dom" line can be somehow redesigned, but I don't quite understand the logic (because positioning of elements using order of letters is quite... quirky).

If I remove the dom line (and buttons), the dark background comes back.

kthorngren

Are you looking for something like this?
http://live.datatables.net/sezubewe/1/edit

Looks like you need to add the buttons.jqueryui.min.js include file to complete the styling integration.

I also used the jQuery UI DOM example:
https://datatables.net/reference/option/dom#Styling

If this doesn't help please update the example to replicate the issue.

Kevin

testownik

I didn't included buttons.jqueryui.min.js by purpose for now. Current view looks more coherent (button heights are similar to dropdown list). When jqueryui is included, buttons get higher than the tropdown list, and everything is top-aligned (i.e. not centered). Apart from that, for some reason, buttons change theme only locally, not when I move files to the server.

The code helped. But I have a question. My understanding is, that when I modify the code as here:

http://live.datatables.net/sezubewe/2/

the 'lBf' part should escape this styling (background). Or?