[Select, BS4]: CSS-Bug on nested DataTables (e.it #329)

pgerundt

As mentioned on
https://datatables.net/forums/discussion/72248/nested-datatables-with-select-checkbox-icons

when having nested DataTables, a checkbox icon is added to the header of the inner DT because of incorrect CSS definitions in
https://cdn.datatables.net/select/1.3.4/css/select.bootstrap4.css

We set up a test case here:
http://live.datatables.net/jaqacico/1/edit
(please note the header marked in red)

This can be fixed easily by adding some child selectors ">" to the CSS file (marked with "**"):

table.dataTable tbody **> tr >** td.select-checkbox,
table.dataTable tbody **> tr >** th.select-checkbox {
  position: relative;
}
table.dataTable tbody **> tr >** td.select-checkbox:before,
table.dataTable tbody **> tr >** td.select-checkbox:after,
table.dataTable tbody **> tr >** th.select-checkbox:before,
table.dataTable tbody **> tr >** th.select-checkbox:after {
  display: block;
  position: absolute;
  top: 1.2em;
  left: 50%;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
}
table.dataTable tbody **> tr >** td.select-checkbox:before,
table.dataTable tbody **> tr >** th.select-checkbox:before {
  content: " ";
  margin-top: -2px;
  margin-left: -6px;
  border: 1px solid black;
  border-radius: 3px;
}
table.dataTable tr.selected **>** td.select-checkbox:after,
table.dataTable tr.selected **>** th.select-checkbox:after {
  content: "✓";
  font-size: 20px;
  margin-top: -19px;
  margin-left: -6px;
  text-align: center;
  text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}
table.dataTable.compact tbody **> tr >** td.select-checkbox:before,
table.dataTable.compact tbody **> tr >** th.select-checkbox:before {
  margin-top: -12px;
}
table.dataTable.compact tr.selected **>** td.select-checkbox:after,
table.dataTable.compact tr.selected **>** th.select-checkbox:after {
  margin-top: -16px;
}

allan

Many thanks for flagging that up! I've added that here. It will be in the next release.

Regards,
Allan