How can I reinstate the green plus icon to Responsive?

tangerine

I'm struggling with numerous problems following my upgrade to DT 2.0.3.
I thought I'd start by resolving what should be relatively easy ones like this.
How can I reinstate the green plus icon to Responsive?
TIA

allan

Hi tangerine,

How can I reinstate the green plus icon to Responsive?

That was a change in Responsive 2.5.0 (commit). The idea was to make it much more uniform in rendering across browsers, OSs, and fonts. The old icons had + and - which were often one or even sub-pixels out of alignment.

To reinstate them, you'd need to add some CSS for that - I didn't keep it I'm afraid. It would be quite possible to recreate it it from the old CSS files though.

What are the other issues with the DT2 update? A lot of work went into thinking about the backward compatibility, while still driving it forwards, but I might well have missed something.

Allan

tangerine

Hi Allan. Thanks for responding.
I'll have to get back to you on this as I'm in too much of a muddle at the moment.
My work on my site was interrupted owing to health issues, and now I'm struggling to remember any changes to my own code which might be playing a part.
Thanks again.

allan

I'm really sorry to hear you haven't been well and I wish you all the very best in your recovery!

Allan

tangerine

Thank you, Allan - much appreciated.

colin

Ditto, hope you get back on your feet soon!

C

tangerine

Cheers, Colin!

foxy_stoat

Hi, not sure this is the right way and I must have got this from somewhere on this site as I am not good enough to come up with it myself but here is how I put the responsive back to how it was (not that I have anything against the new way...)
hope it helps and you feel better soon pete

<style> 
        table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
        table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
        top: 50% !important;
        left: 5px !important;
        height: 1em !important;
        width: 1em !important;
        margin-top: -9px !important;
        display: inline-block !important;
        color: white !important;
        border: .15em solid white !important;
        border-radius: 1em !important;
        box-shadow: 0 0 .2em #444 !important;
        box-sizing: content-box !important;
        text-align: center !important;
        text-indent: 0 !important;
        font-family: "Courier New", Courier, monospace !important;
        line-height: 1em !important;
        content: "+" !important;
        background-color: #31b131 !important;
        }

        table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,
        table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before{
        top: 50% !important;
        left: 5px !important;
        height: 1em !important;
        width: 1em !important;
        margin-top: -9px !important;
        display: inline-block !important;
        color: white !important;
        border: .15em solid white !important;
        border-radius: 1em !important;
        box-shadow: 0 0 .2em #444 !important;
        box-sizing: content-box !important;
        text-align: center !important;
        text-indent: 0 !important;
        font-family: "Courier New", Courier, monospace !important;
        line-height: 1em !important;
        content: "-" !important;
        background-color: #d33333 !important;
        }
</style>