Metro UI and DataTables select

oreons

When using Metro UI and Datatables select, when a row is selected, it is shifted to the right by one column.
Metro UI developer advised to write on this forum
Sample project

allan

Its caused by this in the Metro CSS:

.selected::before {
    position: absolute;
    display: block;
    content: "";
    ...

That is forcing a block level element to be shown in a display: table-row element (i.e. that table row!) and is what is breaking the layout.

I can see what that is being done to put a block around the selected item, but it doesn't work with table rows or cells I'm afraid. An outline would probably work, but either way it needs a change in Metro.

If you post a bug report, could you link to it from here so we can keep track of any changes?

Thanks,
Allan

allan

I guess as a workaround you could add:

tr.selected::before {
  content: none;
  display: none;
}

Allan

oreons

Metro UI developer showed how to solve the problem

.dataTable .selected {
  box-shadow: none!important;
}
.dataTable .selected::before, .dataTable .selected::after {
  display: none;
}