Topic: Switch is displayed incorrectly inside table

badmusician free asked 4 years ago

Expected behavior

A switch inside DataTable's cell is rendered the same as a regular switch

Actual behavior

.lever span doesn't appear to have any css rules applied to it

Resources (screenshots, code snippets etc.) enter image description here

y2k_eclipse free answered 3 years ago

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

        $('#dtCategoryTable_wrapper').find('label').each(function () {

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:


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

JS Code:

    $('#dtCategoryTable_wrapper').find('label:not(".no-process")').each(function () {

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

Tomek Makowski staff commented 3 years ago

We will check it, test it and will make necessary fixes


badmusician free answered 4 years ago

@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:

I fixed the styling with js, but I think you should look into it. Code snippets:

Tomek Makowski staff answered 4 years ago

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.



badmusician free answered 4 years ago

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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.17.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No