Incorrectly-displayed DOM Elements when using Bootstrap Panels

dojocasino

I'm finding that the DOM elements for a table are aligned incorrectly when used within a Bootstrap panel and using a manually-configured DOM setting for the table.

Screenshot

    $(document).ready(function () {

        $('#module-results').dataTable({
            "ajax": {
                url: "../includes/EBR.php?moduleID=" + newModuleID,
                type: 'POST'
            },
            serverSide: "true",
            responsive: "true",
            "dom": "flitTp",
            "pagingType": "full",
            "columns": [
                {data: "Student.Surname"},
                {data: "Student.Forename"},
                {data: "Modules.ModuleShortTitle"},
                {data: "CourseParts.PartDescription"},
                {data: "ExamBoards.ExamBoard"},
                {data: "ExamBoardResults.MCQScore"},
                {data: "ExamBoardResults.OverallMark"},
                {data: "CourseWorkOutcomes.Outcome"}
            ],
            "tableTools": {
                sRowSelect: 'os',
                aButtons: [
                    {sExtends: 'editor_create', editor: editor},
                    {sExtends: 'editor_edit', editor: editor},
                    {sExtends: 'editor_remove', editor: editor}
                ]
            },
            initComplete: function (settings, json) {
                // Populate the select lists with the data available in the
                // database on load
                editor.field('ExamBoardResults.CWOutcomeID').update(json.CWOutcomes);
                editor.field('ExamBoardResults.ModuleID').update(json.ModuleCodes);
                editor.field('ExamBoardResults.ExamBoardID').update(json.ExamBoards);
                editor.field('ExamBoardResults.StudentID').update(json.Students);

                //Show fields when creating new records
                editor.on('initCreate', function (e, node, data) {
                    editor.show("ExamBoardResults.StudentID");
                    editor.show("ExamBoardResults.ModuleID");
                    editor.show("ExamBoardResults.ExamBoardID");
                    editor.show("ExamBoardResults.Notes");
                    editor.show("ExamBoardResults.CWOutcomeID");
                });

                //Hide some options when editing existing records
                editor.on('initEdit', function (e, node, data) {
                    editor.hide("ExamBoardResults.StudentID");
                    editor.hide("ExamBoardResults.ModuleID");
                    editor.hide("ExamBoardResults.ExamBoardID");
                });
            }
        });
    });

                    <div class="col-lg-12">
                        <div class="panel panel-default panel-icr-blue" id="moduleDetailsPanel">
                            <div class="panel-heading">

                                <h5 style="margin-top: 0px; margin-bottom: 0px"><i class="fa fa-trophy fa-fw"></i> Module Results<span class="moduleStudentsPanelHeader"></span></h5>

                            </div>
                            <div class="panel-body">
                                <div class="table-responsive" style="overflow-x: hidden">
                                    <table class="table table-hover table-bordered table-striped" id="module-results" width="100%">
                                        <thead>
                                            <tr class="tableHeaderBlue">
                                                <th style="color:white">Last Name</th>
                                                <th style="color:white">First Name</th>
                                                <th style="color:white">Module</th>
                                                <th style="color:white">Part Desc</th>
                                                <th style="color:white">Exam Board</th>
                                                <th style="color:white">MCQ Score</th>
                                                <th style="color:white">O/A Mark</th>
                                                <th style="color:white">Outcome</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

If I remove the dom option from the table initialisation jQuery then everything aligns correctly, however without the TableTools buttons. Any idea what could be causing this?

dojocasino

To anybody else experiencing this issue; ensure you have jquery.dataTables.min.css included. I managed to overlook it numerous times somehow; including it again has rectified the problem.

KeshavGyawali

try this css, works somehow
http://www.keshavgyawali.com.np/libmgmtsys/resources/datatable/css/jquery.dataTables.min.css