table flows outside of div

table flows outside of div

montoyammontoyam Posts: 568Questions: 136Answers: 5
edited February 2021 in DataTables

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: '' }
                    }
                }

            });

```

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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%;
    }
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    darn. ok. thanks.

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

This discussion has been closed.