rtl - with responsive

dbla

hello there,

is there a way to change icons of the expanded arrow on responsive ?
in rtl its not showing in the correct direction

kthorngren

I right clicked and inspected the responsive arrow to see how the CSS is applied:

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    margin-right: .5em;
    display: inline-block;
    box-sizing: border-box;
    content: "";
    border-top: 5px solid transparent;
    border-left: 10px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid transparent;
    border-right: 0px solid transparent;

I overrode these settings by swapping the border-left and border-right settings:

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    border-right: 10px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid transparent;

Looks like that change works in this test case - see the CSS tab:
https://live.datatables.net/rejejuqa/1/edit

Kevin

dbla

thx you !

needed to override header title and filter arrows position to make it as in ltr also.

allan

Ah - I didn't think of that - sorry. I'll correct that for the next release of Responsive.

Allan