'Copy to clipboard' Message box does not disappear

nitinkmishra

I am using datatables and buttons in .NET Blazor app. I have Copy, Excel, Pdf and CSV buttons added. Everything is working except 'Copy to clipboard' pop-up does not disappear after the user clicks on the 'Copy' button. I do see the table data copied but the pop-up does not go away. I am also not able to change the text on the pop-up. The pop-up has only two rows -

Copy to clipboard
copied 10 rows to clipboard

I cant post the link here due to copyrights.

function InitDataTable(table) {
            $(document).ready(function () {
                if (!$.fn.DataTable.isDataTable(table)) {
                    $(table).DataTable({
                        dom: "B<'col-sm-12'tr>" +
                            "<'col-sm'l><'col-sm-4'f><'col-sm-4'p><'col-sm-4'i>",
                        buttons: [
                            {
                                extend: 'copyHtml5',
                                text:  'Copy',
                                copyTitle: 'Copy Data',
                                copyKeys: 'Press <i>ctrl</i> or <i>\u2318</i> + <i>C</i> to copy the table data<br>to your system clipboard.<br><br>To cancel, click this message or press escape.'                           
                            },
                            'csv', 'excel',
                            {
                                extend: 'pdf',
                                orientation: 'landscape',
                                pageSize: 'TABLOID',
                                title:'SongView report'
                            },
                            'print'
                        ]
                    });

                }
            });
        }

colin

The only thing I can think of is that you're mixing styles and not loading the correct CSS files. Try using the download builder as it ensures you have the right files with the correct dependencies.

If that doesn't work, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin