Switch is displayed incorrectly inside table

More info:

The DataTable is server-processed.

If the server returns <div class="switch"> <label>Off <input type="checkbox" checked> <span class="lever"></span> On </label> </div> then the switch is displayed like shown above.

But if the server returns <div data-replace-with-switch></div> and then I replace it with the switch using JS, then everything is rendered fine.

Could you show me your code in snippet editor or just send some photo of your code?

Morover i was trying to solve your problem but i'm not sure you meant exactly that.

Snippet: https://mdbootstrap.com/snippets/jquery/tomekmakowski/2046691

Regards

@Tomek Makowski just figured out the problem. The code that was causing the issue was the material styling code for the table from this page: https://mdbootstrap.com/docs/jquery/tables/datatables/#material-design-example

I fixed the styling with js, but I think you should look into it. Code snippets: https://gist.github.com/kupriashov/684e4c0aba78e4fea033331246161ec2

I just had the same issue and found out the problem was in this code:

        $('#dtCategoryTable_wrapper').find('label').each(function () {
            $(this).parent().append($(this).children());
        });

This coide will get all labels and append info to them making the switch unworkable. The easiest way to solve the problem is to add a class that I made up and called 'no-process' to the label for the switch and modified the JS code a bit:

HTML:

<td>
    <div class="switch">
        <label class="no-process">
            Off
            <input type="checkbox" checked>
            <span class="lever"></span>
            On
        </label>
     </div>
</td>

JS Code:

    $('#dtCategoryTable_wrapper').find('label:not(".no-process")').each(function () {
        $(this).parent().append($(this).children());
    });

Now everything works as expected. I hope this will help you guys!