customize the buttons open_details and close_details

customize the buttons open_details and close_details

DOUDOUDOUDOU Posts: 4Questions: 2Answers: 0

I am following this example: https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html
I want to customize the buttons (open_details and close_details). I want to use other images. Can you help me?

Answers

  • asystemsausasystemsaus Posts: 15Questions: 5Answers: 0

    The buttons are just images as defined in a style.

    td.details-control {
    background: url('resources/details_open.png') no-repeat center center;
    cursor: pointer;
    }
    tr.shown td.details-control {
    background: url('resources/details_close.png') no-repeat center center;
    }
    

    I'd imagine you can just nominate another image in your resource folder.
    I'd be cautious though.... to make it look good they should probably be the same size as the original.

    I have just tested it with a small favorites.png and close.png image and it works for me.
    Also used smiley.png... looks a bit odd. But works.

    td.details-control {
    background: url('resources/favorites.png') no-repeat center center;
    cursor: pointer;
    }
    tr.shown td.details-control {
    background: url('resources/close.png') no-repeat center center;
    }
    

    Hope this helps.

  • DOUDOUDOUDOU Posts: 4Questions: 2Answers: 0

    Thank you,
    I tested it but it doesn't work for me.
    I tested this:
    <style>
    table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before{
    background-image: url('/my-image.jpg');
    background-color: purple;
    }
    </style>
    It works but I couldn't distinguish between the image open and close.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    This example from this thread is using Fontawesome fonts, that should help in addition to the suggestion from @asystemsaus

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Duplicated thread, please post just once.

This discussion has been closed.