Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link.
I adjusted the processing message styling as follows:
.dataTables_processing {
margin-top: -80px !important;
padding: 70px !important;
background: #F5F8FA !important;
color: blue !important;
border: 2px dotted darkgrey;
border-radius: 3px !important;
font-size: xx-large !important;
opacity : 1 !important;
text-decoration: none;
}
This modification successfully displayed the processing message when loading data on page open, however subsequent data refreshes did not show the message in the desired position.
I attempted to adjust the vertical alignment by adding the following to the existing style:
vertical-align: top;
vert-align: top;
This adjustment did not yield the expected result.
The HTML structure of the data area is as follows:
<div class="table-responsive">
<div id="get-vote-dt-listing-table_wrapper"
class="dataTables_wrapper no-footer">
<div id="get-vote-dt-listing-table_filter" class="dataTables_filter"
style="display: none;"><label>Search:<input type="search" class=""
placeholder=""
aria-controls="get-vote-dt-listing-table"></label>
</div>
<div id="get-vote-dt-listing-table_processing"
class="dataTables_processing" style="display: block;">Loading
votes...
</div>
<table class="table table-bordered table-striped text-primary dataTable no-footer"
id="get-vote-dt-listing-table" role="grid"
aria-describedby="get-vote-dt-listing-table_info">
<thead>
...
// Table content omitted for brevity
...
</table>
<div class="dataTables_info" id="get-vote-dt-listing-table_info"
role="status" aria-live="polite" style="display: none;"></div>
<div class="dataTables_paginate paging_simple_numbers"
id="get-vote-dt-listing-table_paginate"></div>
</div>
</div>
What would be the correct method for achieving the desired style modifications?
Uploaded block # 1
You can view a live example at this link. Log in with credentials [email protected] 111111, then navigate to this page.
The processing message should display within 1-2 seconds upon page upload. If you enter "001" in the filter field labeled “Enter Box Room No.” and click “Search”, there is a deliberate 30-second delay added for debugging purposes. Scroll down to observe the processing message...
Thank you!