table flows outside of div

montoyam

I looked in the forum but I haven't seen this posted before:

I am using Bootstrap 4 and find that the DataTable will flow outside of the div. The search box and page navigations stay within the div, but not the rows of data

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="card pt-3 mb-3">
                        <h3 class="card-title">Departments</h3>
                        <div class="card-body">
                            <table class="table table-striped table-bordered" id="Departments"></table>
                        </div>
                    </div>
                </div>

            DepartmentsTable = $('#Departments').DataTable({
                dom: 'Bfr<"totals_FTE">tip',
                ajax: 'api/Departments',
                columns: [
                    {
                        title: "Fund/Org count",
                        className: 'details-control',
                        orderable: false,
                        data: 'DeptFundOrg', render: function (data) {
                            return data.length;
                        },
                        defaultContent: '',
                        width: '10%'
                    },
                    { data: "Departments.DepartmentName", title: "Department" },
                    { data: "dc.Group_Total_FTE", className: "dt-body-right dt-head-right", title: "Total FTE" },
                    { data: "dc.Group_Total_Emp", className: "dt-body-right dt-head-right", title: "# Employees" },
                    {
                        data: 'DeptFundOrg',
                        title: "Fund/org",
                        visible: false,
                        render: function (data) {
                            return data.map(function (o) {
                                return o.Fund + ' ' + o.Org;
                            })
                        }
                    }
                ],
                order: [[1, 'asc']],
                select: { style: 'single' },
                //scrollY: 300,
                paging: false,
                autoWidth: true,
                buttons: {
                    buttons: [
                        { extend: 'create', editor: DepartmentsEditor, text: '<span class="fa fa-plus-circle fa-2x icon-purple"></span>', className: 'btn', titleAttr: 'Add Department' },
                        { extend: 'edit', editor: DepartmentsEditor, text: '<span class="fa fa-edit fa-2x icon-purple"></span>', className: 'btn', titleAttr: 'Edit Department' }
                    ],
                    dom: {
                        button: { tag: 'i', className: '' }
                    }
                }

            });

```

kthorngren

Start by adding style="width:100%" to the table tag, as shown in this example. If the data in the rows is too wide you may need to use scrollX or the Responsive extension.

Kevin

montoyam

ah, yes, width:100% worked perfectly.

I tried to add it to the css so I wouldn't have to do it for each table, but it doesn't seem to be working. is this the correct syntax (I am using bootrap4 if that matters)?

table.dataTable {
    width: 100%;
}

kthorngren

The example explains this:

Typically this is done by assigning width:100% in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the width attribute to the HTML table tag or inline width style (style="width:100%"), it will be used as the width for the table (overruling any CSS styles).

So you need to add it directly to the table element.

Kevin

montoyam

darn. ok. thanks.

montoyam

i found i can also do this after the tables are rendered:

$(".table").addClass("compact nowrap w-100");

w-100 is a class in Bootstrap.