How to style dataTable checkboxes

AlexanderLamas

Hi All,

I've been played with the checkbox styling inside of dataTable but with no much success.

Have anyone changed the style, like size and some other effect for the checkboxes inside of the dataTables?
Centralize vertically and horizontally?

For example: I would like to add this style for my checkboxes, but, I'm not sure of the limitations and possibilities when customizing that

Style sample: https://codepen.io/CreativeJuiz/pen/BiHzp

Thank you very much in advance!

Regards,
Alex

colin

Hi @AlexanderLamas ,

As I said in your other thread, if you can post a test case, we can make suggestions on your setup. 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

AlexanderLamas

Hi Colin,

Here is the link for my test case.

http://live.datatables.net/yadiqiku/1/

This link https://codepen.io/CreativeJuiz/pen/BiHzp

shows, what I was thinking of as a style to change my dataTable style to.

Let me know if you need any more details.

Thank you very much!

Regards,
Alex

allan

Hi Alex,

The issue here is that the checkbox shown by Select is not a real checkbox. Its actually just a UTF8 character inserted by CSS and a rounded border box.

The style example you linked to on CodePen uses real <input type="checkbox"> elements and CSS to style them.

You'd need to modify the CSS used by Select to match the styling you want for the checkbox, rather than just using the CSS from that Pen.

Allan

AlexanderLamas

Hi Allan,

Thanks for you reply.

One thing I've noticed was that in the header row, the checkbox is not the same style, as I'm adding the checkbox manually as per code below.

<th style="text-align: center"><input type="checkbox" id="select_all" /></th>                   

If I try to just use like this

<th></th>

it doesn't show anything.

In my columnDefs I'm adding the following code for the column 0

{
    targets: 0,
    data: "select",
    searchable: false,
    orderable: false,
    className: 'select-checkbox',
    width: "3%"
}

I had to add a fake column on my result set to get the checkbox.

How do I do to get checkbox on the header automatically as well as the body rows do just using the simple tags as follow?

<th></th>

Just in case, this is my table structure

                <table id="tblIndex" class="table table-hover table-striped table-bordered table-sm" style="width:100%">
                    <thead>
                        <tr>
                            <th style="text-align: center"><input type="checkbox" id="select_all" /></th>
                            <th align="left">{{text.email}}</th>
                            <th align="left">{{text.name}}</th>
                            <th align="center"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

Thank you very much!

Regards,
Alex

kthorngren

This example should help. I believe it uses the default CSS settings for checkboxes in the rows and applies them to the header.

http://live.datatables.net/punivaya/1/edit

Kevin

AlexanderLamas

Hi Kevin,

Thanks for your reply.

I've tried to change my implementation according to the sample you sent me, but it didn't work.

I've created a test case for you to take a look and see what I've done wrong.

http://live.datatables.net/regelita/1/

What I want to achieve.

1. Add the checkbox column into <thead> automatically as I'm aready doing for <tbody> rows;
2. Centralize the <th> and <tr> checkbox column vertically and horizontally;
3. Be able to select and deselect all via <th> checkbox column;

In my computer I'm able to select and deselect all with the code you can see in the test case, but, in the test case I can not.

I'm using Bootstrap 4.1.3, I don't know if that is a problem. Please let me know if there any problem of compatibility.

Thank you very much!

Regards,
Alex

colin

Hi @AlexanderLamas ,

Here it is modified and working. There were a couple of problems:

1. you hadn't included most of the buttons JS files
2. you hadn't defined the table classes ("table table-striped table-bordered")

Hope that does the trick,

Cheers,

Colin

AlexanderLamas

Hi Colin,

Thank you very much for your reply!

Actually, I used the css and the js files for the buttons in my sample code.
I just thought they would not be needed for this exercise.

I also used the table classes as follow

<table id="tblIndex" class="table table-hover table-striped table-bordered table-sm" style="width:100%">

I just would like to do NOT add the input type="checkbox" as per code below

<th style="text-align: center"><input type="checkbox" id="select_all" /></th>

My intention is to keep the same look and feel in the <thead></thead> section as the API is creating for the <tbody></tbody> section. Like in this sample

http://live.datatables.net/punivaya/1/edit

I'm not sure if the usage of bootstrap 4.1.3 make it harder to achieve.
Please let me know if that is the case.

If you can, please change the test case I sent you previously.

http://live.datatables.net/regelita/3/edit

Thank you very much again!

Kind regards,
Alex

kthorngren

I took the example I posted and updated it for Bootstrp4:
http://live.datatables.net/xicecaxe/1/edit

Only made one change to the CSS to center vertically the checkbox:

.....
table.dataTable thead th.select-checkbox:after {
  display: block;
  position: absolute;
  top: 50%;   <<< was top: 1.2em;
  left: 50%;
.....

Kevin

AlexanderLamas

Hi Kevin,

It worked as a charm.

Thank you very much for your help, much appreciated!

Regards,
Alex

AlexanderLamas

Hi Kevin,

Sorry mate! Quick question.

I was testing in IE and Microsoft Edge, but the settings to centralize the check boxes are not working properly for these browsers. Just the check boxes are not aligned.

Have you encountered this problem?
If so, how did you solve this problem?

These are the lines giving problem.

table.dataTable tbody td.select-checkbox:before,
    table.dataTable tbody td.select-checkbox:after,
    table.dataTable thead th.select-checkbox:before,
    table.dataTable thead th.select-checkbox:after {
        display: block;
        position: absolute;
        top: 50%; <-- THIS LINE ***
        left: 50%;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
    }

    table.dataTable tbody td.select-checkbox:before,
    table.dataTable thead th.select-checkbox:before {
        content: ' ';
        margin-top: -6px; <-- this line ***
        margin-left: -6px;
        border: 1px solid black;
        border-radius: 3px;
    }

Thank you!

Regards,
Alex