Custom CSS and BS5 conflict after upgrading to DT v2.0

Custom CSS and BS5 conflict after upgrading to DT v2.0

ryanongryanong Posts: 4Questions: 2Answers: 0

I have been using v1.13.11 with custom BS5 templates provided by Themesbrand (https://themesbrand.com/velzon/html/default/tables-datatables.html) in ASP Net Core Razor pages.

After upgraded to v2.0, I noticed the following:

  1. A border box was shown when mouse cursor was over a column header.
  2. Extra top and bottom border lines were shown.

I have the following in my codes:

<link href="https://cdn.datatables.net/v/bs5/dt-2.0.5/r-3.0.2/rg-1.5.0/datatables.min.css" rel="stylesheet" type="text/css">

<script src="https://cdn.datatables.net/v/bs5/dt-2.0.5/r-3.0.2/rg-1.5.0/datatables.min.js"></script>

I have tried to modify the custom CSS but I couldn't identity the correct class/attribute to change. Any advice on how to rectify the issues? Please help. Thanks.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin
    Answer ✓

    A border box was shown when mouse cursor was over a column header.

    This is intentional to show the mouse position and make it easier for the user to identify that something would happen on click. If you don't want that, add the following CSS to your page:

    table.dataTable thead > tr > th:hover {
      outline: none !important;
    }
    

    Extra top and bottom border lines were shown

    Can you link to a test case showing the issue please? I'm not seeing that here.

    Allan

  • ryanongryanong Posts: 4Questions: 2Answers: 0
    edited April 24

    Hi Allan, thanks for your fast response. The mouse-over issue is now fixed as per your reply.

    As for the extra border lines issue, please refer to the image prior to the update:

    Extra black border lines were shown in top and bottom of tbody.

    • I am sorry as I am not able to create a test case to illustrate the issue.
  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    I'm afraid I can't debug CSS in an image and the example I provided doesn't appear to show the issue you are seeing. I'm afraid I don't know what is causing that and can't help without a test case.

    Allan

  • ryanongryanong Posts: 4Questions: 2Answers: 0

    Hi Allan, somehow I managed to add the following to CSS and the issues are fixed:

    table.dataTable thead > tr > th:hover {
        outline: none !important;
    }
    
    table.dataTable thead th {
        border-bottom: 0 !important;
    }
    
    table.dataTable tbody {
        border-top: 0 !important;
    }
    
    div.dt-scroll-body {
        border-bottom: 1px solid var(--vz-border-color) !important;
    }
    
    div.dt-scroll-foot {
        margin-top: 6px !important;
    }
    

    Thanks for your help.

Sign In or Register to comment.