Does the order of the application of the css files matter?

chris_n · February 2015

I have an instance of the editor which works nearly perfectly with the single exception of the even rows not displaying the selector highlight properly. When an even row is selected, only the first cell of the table row is highlighted and not the entire row. The odd rows select properly.

I am using the bootstrap framework, and I am loading all of the extension js and css per the examples but not in the same order as the examples. Unfortunately I am unable to post code as this is an in-house app with proprietary foo in it.

chris_n · February 2015

Incidentally, changing the tr class from 'odd DTTT_selected_selected' to 'even DTTT_selected_selected' does not make the problem go away.

Furthermore, the calculated styles for both odd and even rows is the same with the single exception of the color of the selector highlighting (as expected).

allan · February 2015

What I would suggest is to use the "Inspect element" option in your browser to take a look at the styles applied to the uncoloured rows and see what is overriding them. It is possible it is the file ordering, but it could also be some other included style that is causing the issue.

You could also try comparing the styles applied to those in the Editor / Bootstrap example.

Regards,
Allan

chris_n · February 2015

The example cited above appears to be using an entirely different class named 'active' which does not appear in my instance. In my instance the class name is 'DTTT_selected__selected."

I'm using the same versions of all libraries as the example, so I'm not sure why the difference in class names. Maybe that's the problem?

chris_n · February 2015

Indeed, changing the class name to 'active' in my instance corrects the problem, so I must be either loading up the wrong css or some such.

allan · February 2015

Are you loading the DataTables / Bootstrap integration files? And also ensure that you aren't loading the default DataTables CSS since that isn't needed and could conflict.

Allan

chris_n · February 2015

Yes, I load the integration files.

Here is the opening section of the page which includes the various css and js includes. Maybe you can see something I'm missing. Removing the local css file 'dashboard.css' does not correct the problem.

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
            <script src="../js/datatables/media/js/jquery.js"></script>
            <!-- Bootstrap stuff -->
            <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
            <link rel="icon" type="image/png" href="../images/favicon.ico" />
            <style type="text/css">

                body {
                  padding-top: 60px;
                  padding-bottom: 40px;
                }
                .sidebar-nav {
                  padding: 9px 0;
                }

                @media (max-width: 980px) {
                  /* Enable use of floated navbar text */
                  .navbar-text.pull-right {
                    float: none;
                    padding-left: 5px;
                    padding-right: 5px;
                  }
                }

            </style>
            <script src="../js/bootstrap/bootstrap.min.js"></script>


        <link rel="stylesheet" type="text/css" href="../js/datatables/extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../css/local/dashboard.css">
        <link rel="stylesheet" type="text/css" href="../js/datatables/extensions/TableTools/css/dataTables.tableTools.css">
        <link rel="stylesheet" type="text/css" href="../js/datatables/extensions/Editor-1.3.3/css/dataTables.editor.css">
        <link rel="stylesheet" type="text/css" href="../js/datatables/extensions/Editor-1.3.3/examples/resources/bootstrap/editor.bootstrap.css">

        <script type="text/javascript" language="javascript" charset="utf-8" src="../js/datatables/media/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="../js/datatables/extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="../js/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="../js/datatables/extensions/Editor-1.3.3/js/dataTables.editor.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="../js/datatables/extensions/Editor-1.3.3/examples/resources/bootstrap/editor.bootstrap.js"></script>

allan · February 2015

I think you need to load TableTools before the Bootstrap integration file. Otherwise the integration file can't modify TableTools' defaults.

This load ordering is a huge pain! On the bright side I had a plan to counter it. On the downside, it is dependent on a few other things, so it will be a few months before I can implement it - but keep an eye out on the blog if you are interested :-)

Allan

chris_n · February 2015

That did it!

Thanks a million, Allan. Both for the fine product and the great support!

Chris

chris_n · February 2015

So just for future reference for anyone having similar issues: The order both css and js are loaded is important. My issue was finally resolved by loading them in the exact order given in the example found here:

http://editor.datatables.net/examples/styling/bootstrap.html

I include that order here for easy reference:

    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">

    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
    <script type="text/javascript" language="javascript" src="../../media/js/dataTables.editor.min.js"></script>
    <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>

Does the order of the application of the css files matter?

Does the order of the application of the css files matter?

Answers

Howdy, Stranger!

Categories

DataTables

Does the order of the application of the css files matter?

Does the order of the application of the css files matter?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables