Hover is not highlighting rows

Mwhite007

in order to control color scheme on my table, you gave me a small function which works great mostly:

     /* ANY ADDED ROW SHOULD HAVE THE 'DATA' CLASS ADDED */
    createdRow: function ( tr ) {
        $(tr).addClass('data');
    },

but i think this kills the hover/highlight function on the dataTable tbody rows. if i remove the createdRow function the highlighting works on hover but i lose the css from the color scheme i have

Mwhite007

this is the css for the data class

.data td {
  background-color:var(--DataBG);
  color: var(--DataFontColor);
  font-family: var(--SmallFontFamily);
  font-size: var(--DataFontSize);
  font-weight:normal;
  line-height: var(--LineHeightCompact);
}

Mwhite007

i'm using Bootstrap 5.3 but adding the class table-hover doesn't seem to have any effect
https://getbootstrap.com/docs/5.3/content/tables/#hoverable-rows

Mwhite007

here are the global variables:

/* Define Global Variables to be used throughout the sheet */
:root {
  --FontFamily: Aptos, "Trebuchet MS", Tahoma, Calibri, Roboto, Helvetica;
  --SmallFontFamily: "Aptos Narrow", Tahoma, Calibri, "Roboto Condensed", Helvetica;
  --LineHeightCompact: 1.1;
  --MenuBG: #525357;  /* Typically same as ParamBG */
  --MenuFontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --MenuFontSize: 8pt; /* Typically same as SubDataFontSize */
  --SubMenu1BG: #3A3A3D; /* Typically 10% darker/lighter ParamBG */
  --SubMenu1FontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --SubMenu2BG: #222224; /* Typically 20% darker/lighter ParamBG */
  --SubMenu2FontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --ParamBG: #525357;
  --ParamFontColor: #E5E2DA;
  --ParamInputBG: #DEE1D6; /* Typically same as ParamFontColor */
  --ParamInputFontColor: #171A18; /* Typically same as ParamBG */
  --ParamFontSize: 12pt;
  --HeadBG: #394E60; 
  --HeadFontColor: #E5E2DA;
  --HeadFontSize: 18pt;
  --SubHeadBG: #635554;
  --SubHeadFontColor: #E0E5CF;
  --SubHeadInputBG: #F0F8FF; /* Typically same as SubHeadFontColor */
  --SubHeadInputFontColor: #191970; /* Typically same as SubHeadBG */
  --SubHeadFontSize: 12pt;
  --DataBG: #848973;
  --DataBGHover: #ACB396; /* to highlight selected row */
  --DataFontColor: #171A18;
  --DataFontSize: 10pt;
  --DataLinkHover: #C7CCB8; /* Typically same as SubDataBG */
  --SubDataBG: #C7CCB8;
  --SubDataFontColor: #171A18;
  --SubDataFontSize: 8pt;
  --subDataLinkHover: #635554; /* Typically same as SubNeadBG */
}

kthorngren

AFAIK adding table-hover class should enable hovering on the BS5 Datatable. I placed your code snippets in this test case:
https://live.datatables.net/totagoxo/1/edit

The CSS you supplied is using the selector .data td. This does not apply to the data class assigned to the rows. Also the selector won't work and should be td .data.

Please update my test case to show the issue you are having so we can help debug. Or provide a link to a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I updated my test case with the CSS selector and it seems to work:

table.table.table-striped tr.data td  {
  background-color:var(--DataBG);
  color: var(--DataFontColor);
  font-family: var(--SmallFontFamily);
  font-size: var(--DataFontSize);
  font-weight:normal;
  line-height: var(--LineHeightCompact);
}

Updated test case:
https://live.datatables.net/loraloni/1/edit

If you still need help please provide a link to a test case replicating the issue.

Kevin

Mwhite007

with your test case I was able to find that i was missing the "table" class on the table tag. When i added that i lost my css color scheme (background-color was being overwritten) so i had to update the css by adding !important .
the old line:

  <table id="dt_system" class="table-hover headingTable" width="100%">

the new line:

  <table id="dt_system" class="table table-hover headingTable" width="100%">