dom styling vs styles (some problem/conflict)

dom styling vs styles (some problem/conflict)

testowniktestownik Posts: 16Questions: 8Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 4,325Questions: 19Answers: 940
    edited November 17

    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

  • testowniktestownik Posts: 16Questions: 8Answers: 0

    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.

  • kthorngrenkthorngren Posts: 4,325Questions: 19Answers: 940
    Answer ✓

    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

  • testowniktestownik Posts: 16Questions: 8Answers: 0

    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?

Sign In or Register to comment.