Metro UI and DataTables select

Metro UI and DataTables select

oreonsoreons Posts: 2Questions: 1Answers: 0

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

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    I guess as a workaround you could add:

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

    Allan

  • oreonsoreons Posts: 2Questions: 1Answers: 0
    edited January 2019

    Metro UI developer showed how to solve the problem :)

    .dataTable .selected {
      box-shadow: none!important;
    }
    .dataTable .selected::before, .dataTable .selected::after {
      display: none;
    }
    
This discussion has been closed.