How can I reinstate the green plus icon to Responsive?

How can I reinstate the green plus icon to Responsive?

tangerinetangerine Posts: 3,365Questions: 39Answers: 395
edited April 9 in Responsive

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

Answers

  • allanallan Posts: 63,514Questions: 1Answers: 10,472 Site admin
    edited April 9

    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

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    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.

  • allanallan Posts: 63,514Questions: 1Answers: 10,472 Site admin

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

    Allan

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Thank you, Allan - much appreciated.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Ditto, hope you get back on your feet soon!

    C

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Cheers, Colin!

  • foxy_stoatfoxy_stoat Posts: 19Questions: 7Answers: 0

    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>
    
Sign In or Register to comment.