I have done a lot of research and am not sure what the best approach is. I have a Kendo Grid (table) with 3 rows and 3 columns. I show a table with only the first column populated upon initial page load, and then I call and AJAX method to retrieve the rest of the data and replace the whole table with the new HTML.
----------------
| 01 | | |
| 02 | | |
| 03 | | |
----------------
And I replace the whole table with html that shows a table like this:
----------------
| 01 | hi | gr |
| 02 | hi | sd |
| 03 | fe | sf |
----------------
What I want to do though, is somehow "draw" a square over the empty columns in the initial empty table (with only the first column populated) so I can display a message in the center.
What is the best approach to achieve this?
Here is an example what are you looking for. There is 2 px error because of the cells border spacing or something but i'm too tired to find the solution for that now. Your div's height is equals with padding-top+height. Padding is needed to position your loading text vertically middle.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#mytable{
position: absolute;
border: 1px solid black;
width: 20%;
width: 100px;
height: 100px;
}
#box{
padding-top: 40px;
text-align: center;
position: absolute;
margin: 0px;
z-index: 40;
border: 1px solid blue;
width: 100px;
height: 60px;
}
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>Cat</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Dog</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Parrot</td>
<td></td>
<td></td>
</tr>
</table>
<div id="box">
Loading...
</div>
</body>
</html>
Add a class to the table loading
and mark it up with CSS. When the AJAX call is done()
, remove the loading
class.
However you do it with Kendo, this example is simply suggestive in jQuery.
var table = $('#table');
table.addClass('loading');
$.ajax(ajaxOptions).done(function(){
table.removeClass('loading');
});
Then for the CSS play around with transparent background-color
in rgba(238, 238, 238, 0.4)
or an ajax loader (hence the name).
table { position: relative; }
table.loading:before {
width: 100%;
height: 100%;
content: 'loading';
background-color: rgba(234,234,234,0.4);
padding: 70%;
box-sizing: border-box;
position: absolute;
text-align: center;
}
The pseudo selector :before
will create a hidden layer on the table
and only be visible when your loading
class is added. Once the AJAX call is done()
you'll remove it again.
The horizontal centering can be done with text-align
but the vertical centering is only possible with a height
or min-height
.
You can work around that issue by using a second hidden layer :after
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.