Bootstrap Data Table Overlap

Question

I have this 2 data tables below as you can see one of them is overlapping the data table and the other one is need to edit the width. I try to add width but don't have any effect on my first data table. Any suggestion about this two problems?.

HTML

    <div class="row">
    <div class="col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-lg-6">
                        <i class="fa fa-list fa-fw"></i>Borrower Name
                    </div>
                </div>
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <div class="col-lg-6">
                        <table class="table table-striped table-bordered table-hover table-responsive nowrap"
                            role="grid" style="width: 100%;" id="dtBorrowerName">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@*</div>
<div class="row">*@
    <div class="col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-lg-6">
                        <i class="fa fa-list fa-fw"></i>Book
                    </div>
                </div>
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <div class="col-lg-6">
                        <table class="table table-striped table-bordered table-hover table-responsive nowrap"
                            role="grid" style="width: 10%;" id="dtBook">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS CODE

var dtBorrowerName = $('#dtBorrowerName').DataTable({
    responsive: true,
    processing: true,
    info: true,
    search: true,
    stateSave: true,
    order: [[1, "desc"]],
    lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
    ajax: { "url": "/LS/GetBorrower" },
    columns:


   [
                { data: "BorrowerID", title: "", visible: false, searchable: false },
                { data: "IDNo", title: "ID Number" },
                { data: "Name", title: "Complete Name", sClass: "alignRight", width: " 100px" },
                { data: "BookTransactionHdrID", title: "BookTransactionHdrID", visible: false, searchable: false }
            ]
    });


function GetStudentBook(getId) {

        if (getId != 0 || getId != undefined || getId != "") {
            dtStudBook = $('#dtBook').DataTable({
                responsive: true,
                processing: true,
                info: true,
                retrieve: true,
                destroy: true,
                search: true,
                stateSave: true,
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
                ajax: {
                    "url": "/LS/GetStudentBook",
                    "data": function (d) {
                        d.BookTransactionDtlID = getId;
                   }
                },
                columns:
        [
                { data: "BookId", title: "", visible: false, searchable: false },
                //{ data: "Barcode", title: "Barcode",  searchable: false },
                { data: "Author", title: "Author" }
//                { data: "Title", title: "Title", sClass: "alignRight" },
//                { data: "DatePublish", title: "Date Publish", sClass: "alignRight" },
//                { data: "PlacePublish", title: "Place Publish" },
//                { data: "NameOfPublisher", title: "Name Of Publisher"},
//                { data: "ISBN", title: "ISBN"},
//                { data: "BookTransactionDtlID", title: "", visible: false }

        ]
            });
        }
        else {
            //do nothing..
        }
    }

BeNice · Accepted Answer · 2016-10-31 21:36:05Z

1

I hit this problem. It is caused by the length of the table headers and the padding around them. (I am assuming that it looks OK if the panel is wide?).

The solution is to write complicated JS to split words like "Publisher" or (as I did in the end) use Bootstrap visibility to show normal words on larger screens and use abbreviations on smaller screens (I found I had to write extra media queries to clean this up).

You may need a tooltip or whatever to explain your abbreviations. You are rather trying to fit a quart into a pint pot (that is a lot of headings for a small panel if you want them orderable etc) I think it will take quite a bit of hand crafting with very specific media queries.

Hope that helps.

edited Oct 31, 2016 at 21:36

answered Oct 31, 2016 at 9:34

BeNice

2,3353 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trafalgar D Law Over a year ago

Hello can you provide me some link of the ToolTip that you said?.

BeNice Over a year ago

I was just talking about a bog standard tooltip see getbootstrap.com/javascript/#tooltips).... BUT I think I have found a simpler solution. If you stick a span tag and surround a &nbsp and in the spanuse a style to set to a tiny font that should make a natural break (but sadly without hyphens).

Collectives™ on Stack Overflow

Bootstrap Data Table Overlap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related