Tables partially visible

muealexa

Hi,

in my PHP i call datatables as following:

 $this->meta['javascript_ready'][] = '$.extend( true, $.fn.dataTable.defaults, {
                    "pageLength": 20,
                    "bPaginate":true,
                    "responsive": true,
                    "dom": "Bfrtip",
                    "scrollX":true,
                    "buttons": [
                        "pdf",
                        "excel",
                        "csv"
                    ],
                    "language": {"url": "' . resource_url('DataTables/DataTables-1.10.18/i18n/' . $this->lang->get_current_language() . '.json') . '"},
                    "order": [[1, "asc"]],
                })';


 $this->add_meta('javascript_ready', "var table = $('#user-list').DataTable({
            'ajax': '" . site_url('admin/accounts/userdata') . "',
            'select': true, 
            'columns': [
                {'title': '" . lang('user_type') . "'},
                {'title': '" . lang('user_company') . "'},
                {'title': '" . lang('user_lastname') . "'},
                {'title': '" . lang('user_firstname') . "'},
                {'title': '" . lang('user_email') . "'},

                    <table id="user-list" style="width:100%" class="hover"   ></table>

everything is loaded but not the complete table because the page footer hides the rest.
When i resize the page the table becomes completely visible correctly.
Any ideas?

Further the "select" attribute is not working also the coloring of the hover. i tried with modified css but the result on that was that only a single cell was selectable but not the compelete row?

How anyone has an idea?

Thank you and best regards,
Alex

colin

Hi @muealexa ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

muealexa

Found the solution in a previous post:

"scrollY" : function () {
var winHeight = window.outerHeight;
if (winHeight <= 907) {
return "40vh"
} else if (winHeight >= 908) {
return "50vh"
}
},

Question can be closed