I have a big DataGrid
(70 columns, 500 rows). The problem I've encountered is that when I apply some css to render the cells of the grid in a specific manner, the performance of scrolling suffers. I override the default css of DataGrid
and added the below css rules that cause the problem
.dataGridHeader, .dataGridHeader div, .dataGridHeader div, .dataGridCell div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
What I want to do with the above is clear. I just want the cell to remain unchanged even when the text is bigger and just show ...
for the text that is not visible.
The problem is a significant delay when scrolling when using Chrome. I've also tried IE and Firefox, and the results were fine. No delay at all. Can I do something to boost the performance of Chrome?
My question is about css. I know that the grid is big and paging can be used, to reduce some load. This is for a test case and I need only answers that have to do with css.
I'm using GWT 2.5.1 and Chrome 43.0.2357.81
If someone wants to reproduce just download the example the official site and add enough columns and rows to stress it a little bit. Override the default css and add the above.