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 4 years ago


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!


Tomek Makowski staff commented 4 years ago

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

Regards


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


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.

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

Regards


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.

FREE CONSULTATION

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

Status

Answered

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