how to vertically reposition sort icons that span two rows?

newton10471

I'm building a datatable with a complex header, like described here, and I want the sort icons to appear in the middle of the bottom row rather than in the middle of the two rows (i.e., pull them down a bit). Any ideas on how to do that? Thanks in advance for any help.

allan

Can you show me a picture of what you have, and ideally a mockup of what you want? I don't quite get "middle of the bottom row".

DataTables should have the sort icons on the bottom row of the header by default.

Allan

newton10471

Here's what it looks like. Rather than Column1, 2, and 8 having their sort icons positioned above the others in Columns 3-7, I'd rather they all just be the same as for 3-7.

allan

table.dataTable thead th {
      background-position: bottom right !important;
}

Allan

newton10471

Thanks Allan. It turns out that pulls all of the sort icons to the bottom of the 2nd row, which isn't exactly what I want - I wanted them all to line up in the middle of the 2nd row. But you gave me an idea: instead I created a class like this, and just added that class to each of the columns (1, 2, & 8) that occupies the two rows, and it works the way I want:

table.dataTable thead th.my-datatables-class {
     background-position: right 85% !important;
}

Thanks very much for your help!