Datatable messes up datetimepicker's width

osuwariboy

Hey there,

I'm trying to use Datatable with this plugin:

http://eonasdan.github.io/bootstrap-datetimepicker/

The problem is that when I try to put the said plugin inside a cell, things get a bit messed up. I've created a fiddler demonstrating this. Here's the link:

http://jsfiddle.net/28675z97/

There's a datetimepicker above the table that functions correctly (for demo purposes). However, when you activate the one that's inside the table, the dates end up being displayed outside of their defined space. Does anyone know why and how do I fix this?

osuwariboy

Okay, so after a lot of digging, I was able to find what was wrong. The problem lay within the file DataTables.bootstrap.css with the following style:

table.dataTable  thead > tr > th {
padding-left: 8px;
padding-right: 30px;
}

Written as it currently is, this style will apply to ANY "thead" tag contained within the DataTable. Since the Datetimepicker plugin actually creates a table of its own, the above padding gets applied and screws up the display for the said plugin.

Once I figured that out, the fix ended up being rather simple: adding a greater sign to the style to prevent it drilling down to children tables of the Datatable. Here's the end result below:

table.dataTable > thead > tr > th {
    padding-left: 8px;
    padding-right: 30px;
}