How to center Processing message in laravel-datatables with existing data?

Discussion in 'HTML & Website Design' started by mstdmstd, Feb 12, 2019.

  1. #1
    Hi all,
    In my laravel 5.7 application I use "yajra/laravel-datatables-oracle": "~8.0" library and reading this
    https://m.datatables.net/forums/discussion/25666/how-to-customize-the-processing-message
    I modified processing message with style :
    .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;
    }
    Code (CSS):
    and it works and I retrieve data on page open with empty data area.
    But I refresh data I do not see processing message : it is below(looks like middle of the data area).
    I tried to raise with adding to style above :
      vertical-align: top;
      vert-align: top;
    
    Code (CSS):
    But failed.
    The html-code of my data area is :

    <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>
             <tr role="row">
                <th class="details-control sorting_disabled" rowspan="1"
                    colspan="1" style="width: 47px;">+
                </th>
                <th class="sorting" tabindex="0"
                    aria-controls="get-vote-dt-listing-table" rowspan="1"
                    colspan="1" style="width: 59px;">Id
                </th>
                <th class="sorting" tabindex="0"
                    aria-controls="get-vote-dt-listing-table" rowspan="1"
                    colspan="1" style="width: 106px;">Name
                </th>
                <th class="sorting" tabindex="0"
                    aria-controls="get-vote-dt-listing-table" rowspan="1"
                    colspan="1" style="width: 113px;">Status
                </th>
                <th class="sorting" tabindex="0"
                    aria-controls="get-vote-dt-listing-table" rowspan="1"
                    colspan="1" style="width: 125px;">Is Quiz
                </th>
                <th class="sorting" tabindex="0"
                    aria-controls="get-vote-dt-listing-table" rowspan="1"
                    colspan="1" style="width: 219px;">Vote Category
                </th>
                <th class="sorting" tabindex="0"
                    aria-controls="get-vote-dt-listing-table" rowspan="1"
                    colspan="1" style="width: 178px;">Created At
                </th>
                <th class="sorting_disabled" rowspan="1" colspan="1"
                    style="width: 28px;"></th>
                <th class="sorting_disabled" rowspan="1" colspan="1"
                    style="width: 29px;"></th>
             </tr>
             </thead>
             <tbody></tbody>
          </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>
    HTML:
    1) Which is right way with style modifications?
    2) If laravel-datatables-oracle has method to clear data area rows before data retrieving ?
    I think that could be helpfull...
    Here is live example at http://demo2.nilov-sergey-demo-apps.tk/login
    It is under credentials 111111
    after that SITE/admin/box-rooms url
    on uploading page message is visible within 1-2 seconds
    If in filter field “Enter Box Room No.” enter value “001” and click “Search” I added 30 seconds delay for debugging in browser.
    You need to scroll down to see processing message...
    Thanks!
     
    mstdmstd, Feb 12, 2019 IP
  2. sherry233

    sherry233 Banned

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #2
    following
     
    sherry233, Feb 26, 2019 IP