How to make class responsive-table from Materialize compatible with Data Tables ?

How to make class responsive-table from Materialize compatible with Data Tables ?

jfabianjfabian Posts: 13Questions: 3Answers: 0

The first image comes from http://materializecss.com/table.html that is how class responsive-table works.

Thats what happens to datatables with the class responsive-table from Materialize. The sorting works perfect. The only problem is that thead sometimes overlap tbody or thead have diferent height from tbody as seen in the images. Also sorting icons moves. Does someone has solved this problem? Thanks for your time.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin
    Answer ✓

    It looks like they use some CSS trickery to make the table pivot like that. If the content isn't the same height as the height cells, then yes, it would misalign. That is something you would need to take up with the Materialize folks. Its a limitation in that approach unless Javascript is used to match the heights of the cells.

    Allan

  • jfabianjfabian Posts: 13Questions: 3Answers: 0

    It looks that javascript is used to match the heights as you say. I made a pseudo solution setting the height of cells to 40px (height of Materialize button) and taking out the padding from the tables elements ( the padding makes the incompatible with the responsive-table class from Materialize ). If someone knows or have the time to change the height of thead from the maximum height of a td elememt of the table please post the answer.
    Here is the css code for compatibility with responsive-table class:

    @media screen and (min-width:993px){
    #data-table-simple>thead>tr>th{
    padding-left:0px!important;
    }
    }
    @media screen and (max-width:992px) and (min-width:600px){
    #data-table-simple>thead>tr>th{
    width:100%!important;
    height:40px!important;
    padding:0px!important;
    }
    #data-table-simple>tbody>tr>td{
    width:100%!important;
    height:40px!important;
    padding:0px!important;
    }
    #data-table-simple>thead>tr{
    padding:0px!important;
    }
    #data-table-simple>thead{
    width:20%!important;
    }
    #data-table-simple>tbody{
    width:79%!important;
    }
    }

    @media screen and (max-width:599px){
    #data-table-simple>thead>tr>th{
    width:100%!important;
    height:40px!important;
    padding:0px!important;
    }
    #data-table-simple>tbody>tr>td{
    width:100%!important;
    height:40px!important;
    padding:0px!important;
    }
    #data-table-simple>thead>tr{
    padding:0px!important;
    }
    #data-table-simple>thead{
    width:30%!important;
    }
    #data-table-simple>tbody{
    width:69%!important;
    }
    }

This discussion has been closed.