Question about styling

johnmusk · March 23

I'm working on an application that uses DataTables 1.9.0. All the datatables are tied to a specific style, but I don't where they are kept or how they are applied.

I tried changing many css files in different places, but in the end none of the changes had any effect.
I tried searching the application for dataTables..js and dataTables..css and came up with nothing.

Below is a screen shot of a typical data table. As you can see it is heavily styled. Thank you.

allan · March 24

DataTables 1.9 was EOL back in 2014. You might want to update

However, regardless of the version, the answer would be the same. Right click on one of the elements in the table and select "Inspect". The browser's inspector will open and show you styling information, including details about where the style is being defined.

Allan

johnmusk · April 9

Thanks for responding Allan. This application's styling is too complex for me, no matter what I do I cannot change anything style related in the data table. The following is a screen shot when I do an inspection.

Changing the inline style of "line-height" does nothing, which confuses me because I thought this would overwrite "all".

There is a "datatable.css" file, which only seems to contain paging styles. Not what I'm looking for.

When I search for ".dataTable" under web-app I get 2000+ results...too many.

When I create a normal table (html tags only), I have full access to styling, be it embedded or inline styles.

kthorngren · April 9

Possibly you need to add !important?

Here is a running example but its using Datatables 2.0:
https://live.datatables.net/royuxucu/1/edit

As Allan mentioned right click on the table element and select inspect. There you can see the styles applied to the table elements. You may need to define the CSS in the style sections and use more specific selectors to override the default Datatables styles or possibly use !important to override. Its hard to say without seeing what you have. Please post a link to your page or a test case showing the issues you are having with overriding the styles. And provide specifics of what you want to change.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

johnmusk · April 9

The default data table styles have already been overridden.
I'm trying to find out how...and/or where.
The inspection has already been done (see attached image from last post). The styles are shown, but there is only style="dataTable", which gets me 2000 search results.

allan · April 9

If you can give me a link to the page, I might be able to tell you where the styles are being overwritten. An image though, is impossible to debug I'm afraid.

Allan

kthorngren · April 9

Click on the styles tab on the right side panel. This allows you to see what is applied and what is overridden. For example:

Kevin

johnmusk · April 9

Thanks Allan. I hope this is at least part of what you asked me to provide. I can't give you a link because the application is internal (you would need an external account).
Sorry about the wonky spacing.

FROM INSPECTION - TABLE ELEMENT

    <table id="rejectReasonsTable" class="reject-grid dataTable" style="line-height:30px;" 
    aria-describedby="rejectReasonsTable_info">

FROM INSPECTION - SCRIPT TAGS

         <script>
    $("#sessAttrTable").dataTable({
        "bFilter": false,
        "bPaginate": false
    });
    function toggleDebugInfo() {
        $("#debugToggle").text(($('#sessionAttributes').css('display') === "none" ? "-" : "+") + " Debug Info");
        $('#sessionAttributes').toggle();
    }
          </script>

johnmusk · April 9

Kevin, not sure what you wanted here. Did you want the inspected styles for dataTable.css?

johnmusk · April 9

This is most of the relevant html (removed headers and stuff like that)

<div id="debugInfo" style="clear: both; margin-top:10px;">
    <a id="debugToggle" class="no-ajaxy" onclick="toggleDebugInfo();">+ Debug Info</a>
    <div id="sessionAttributes" style="display:none;">
        <table id="sessAttrTable" class="data-grid">
            <thead>
                <tr>
                    <th>Current Session Attributes</th>
                    <th>Values</th>
                </tr>
            </thead>
            <tbody>





            </tbody>
        </table>
    </div>
</div>
<script>
$("#sessAttrTable").dataTable({
    "bFilter": false,
    "bPaginate": false
});
function toggleDebugInfo() {
    $("#debugToggle").text(($('#sessionAttributes').css('display') === "none" ? "-" : "+") + " Debug Info");
    $('#sessionAttributes').toggle();
}
</script>

    <script>
    $(document).ready(function() {
        $("#loginId").focus();
    })
    </script>

            </div>
        </div>

    </div>
</body>
</html>

kthorngren · April 9

Kevin, not sure what you wanted here.

In the screenshot you posted go to the Styles tab. This will show the styles the browser has applied to the elements your are inspecting. In the screenshot I posts you will see the width: 100% from the datatables.css is crossed out and not applied due to the width: 100% applied by the element at the top of the list.

Did you want the inspected styles for dataTable.css?

No.

Kevin

johnmusk · April 9

I think this is what you wanted Kevin. I have the table element highlighted.
These are two separate images.

kthorngren · April 9

Thats what I suggested you look at. Looks like you have style="line-height: 30px;" applied to the table tag. As Allan said its nearly impossible to debug styling issues without seeing the page showing the issue. Please post a test case showing the issue you are having with details of what you are expecting.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren · April 9

I built a base 1.9 example for you:
https://live.datatables.net/qikavaxi/1/edit

It has style="line-height: 10px;" on the table tag and does work. We will need to see the issue to help debug. Update the example I provided if you want.

Kevin

johnmusk · April 9

Kevin, there are a few problems with using a test case:

Changing the table style line-height does nothing. I does not matter if I change it to 10, 30, or 200 the table still looks the same. That's why I believe the inline styling is being overridden.
I cannot provide CSS. The reason I posted this is to find out where the styling is coming from. I simply don't know. The application makes use of many CSS files.
This application also makes use of SITEMESH. I have looked into this, but I'm not certain if it's creating any problems. Finding out how the data tables are styled is a bigger issue.

Thank you.

kthorngren · April 9

The reason I posted this is to find out where the styling is coming from. I simply don't know. The application makes use of many CSS files.

Unfortunately we don't know either without seeing the issue. I showed an example of Datatables 1.9 where the style does apply properly. Investigation via the inspect tool is needed. You might need to inspect the tr and td elements to see if something there is causing the issue.

Kevin

johnmusk · April 10

Just as an aside (it might have nothing to do with data tables) there is a reference to admin/ in several elements. Do you have any idea what this represents? Thank you.

allan · April 10

Click it. It should take you to the source. It looks like you are loading a page called "admin/" and the styles are inline. I'd guess.

johnmusk · April 10

Here is where things get weird. This is an Eclipse application, so there is an "admin" folder {under views} which contains a file called admin.jsp. The problem is, there is no styling for "td" in admin.jsp.

<style type="text/css">
.span-2 {
    width: 60px;
    float: left;
    margin-right: 10px;
}

.span-4 {
    width: 170px;
    float: left;
    margin-right: 10px;
}

.data-grid, .reject-grid {
    width: 95%;
}

td a:link, td a:visited, td a:hover {
    text-decoration: none;
}

table {  

width:50%;

}
</style>

johnmusk · April 10

And to add to my confusion, I searched for "height: 15px;" in the code base and I came up with a few matches, but nothing relevant to "td" at all.

kthorngren · April 10

There is also a td and th setting for line-height: 24px in the main.css.

Possibly all you need to do to override these settings is to create a CSS for -tad td and, if needed, th in the style section of the HTML file with your Datatable. For example:

td {
  line-height: 10px !important;
}

Kevin

allan · April 11

Likely it is a server-side built file. If you click on the link in your inspector as I suggested, I would have expected the browser to take you to the rendered source. How the file is rendered / constructed is entirely a matter for the server-side and without seeing it, we can't possibly know how it is done. Actually, since I don't know JSP, even seeing it I might not know!

Allan

johnmusk · April 11

Thanks Allan that's good information. It's possible there is some library-based utility working on top of data tables. Thank you and Kevin for all your help, I'll keep investigating.

Question about styling

Question about styling

Answers

Howdy, Stranger!

Categories

DataTables

Question about styling

Question about styling

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables