How to fix poor looking Processing message in laravel-datatables?

Petro Gromovo

Hello,
In my laravel 5.7/ blade / jQuery v3.3.1 / Bootstrap v4.1.2 app

I use "yajra/laravel-datatables-oracle": "~8.0" library (as I can see it is based on datatables.net)
and it works ok, but when data are retrieving I do not like how Processing message looks as :
https://imgur.com/a/Otebuku

I can hardly read this message and it is over my table header and as common it looks poor.
I have blade block :

                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-primary" id="get-storage-space-dt-listing-table">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Box Room No.</th>
                            <th>Selling range</th>
                            <th>Warehouse</th>
                            <th>Level</th>
                            <th>Storage Capacity</th>
                            <th>Check In</th>
                            <th>Paid through date</th>
                            <th>Job Ref No</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>

                </div>

and javascript initialization :

backendStorageSpace.prototype.StorageSpacesLoad = function () {
    Mustache.tags = ["<%", "%>"];
    var template = $('#storage_space_details_info_template').html();

    var ins = this
    oTable = $('#get-storage-space-dt-listing-table').DataTable({
        processing: true,
        serverSide: true,
        "lengthChange": true,
        "lengthMenu": this_backendLengthMenuArray,
        ajax: {
            url: this_backend_home_url + '/admin/get-box-rooms-dt-listing',
            data: function (d) {
                d.filter_status = $("#filter_status").val();
                ...
            },
        }, // ajax: {

        columns: [

            {data: 'id', name: 'id'},
            {data: 'number', name: 'number'},
            {data: 'selling_range', name: 'selling_range'},
            {data: 'warehouse_name', name: 'warehouse_name'},
            {data: 'level', name: 'level'},
            {data: 'storage_capacity_name', name: 'storage_capacity_name'},
            {data: 'check_in_date', name: 'check_in_date'},
            {data: 'check_out_date', name: 'check_out_date'},

            {data: 'job_ref_no', name: 'job_ref_no'},
            {data: 'status', name: 'status'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
            {data: 'action_delete', name: 'action_delete', orderable: false, searchable: false}

        ],

        "drawCallback": function (settings, b) {
            ...
I search and did not find where this mesage appearance is controled ? Are there some css style to manipulate ?

If there is a way to make it look better, say show this message below of table row with head block ?

Thanks!

allan

You can change the styling by overriding the default style that DataTables uses.

For example you could use:

.dataTables_wrapper .dataTables_processing {
  background: white;
  border: 1px solid black;
  border-radius: 3px;
}

or whatever suits your needs.

Allan

mikepsinn

I also had to add

z-index: 99999;

i.e.

.dataTables_wrapper .dataTables_processing {
  z-index: 99999;
  background: white;
  border: 1px solid black;
  border-radius: 3px;
}