rtl - with responsive

rtl - with responsive

dbladbla Posts: 2Questions: 1Answers: 0

hello there,

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

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited October 14

    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

  • dbladbla Posts: 2Questions: 1Answers: 0

    thx you !

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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

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

    Allan

Sign In or Register to comment.