when i have a lot of results, the header of the grid recieves 6px (chrome)/ 17px (IE) padding, so the scroll can fit the screen. but when i sort one column the results are re-rendered and the padding goes away for like 2secs and then comes back. that behaviour makes the header move. what can i do to stop it?
Hello Glintt hs,
Thank you for posting in our forum.
Which is the version of Ignite UI that you use when you observe this behavior? Typing “$.ui.igGrid.version” in the browser console would give you the build number.
Also are there any error messages in the console and are you sure all of the CSS files get loaded correctly? Opening the “Network” and reloading the page would show you if some of them fail to load.
This padding of 17px gets applied for the grid headers by default if no “width” has been set for the grid. Try setting it to some value (for example “width: ‘800px’”) and see if the problem persists.
If you need any additional assistance, feel free to contact me.
i'm using "16.2.20162.2141" version, and i was already using "100%" width for the grid and the css is being loaded properly. But the movement on the header Still happens. When i re-order the grid, the items disappear for a while and the padding to. But when the new ordered items are rendered on the grid again, the padding comes back. That's causing the movement on the header.
I tried reproducing this behavior by using the sample code I have provided below and the build you are using – 16.2.20162.2237, but with no success. By “re-ordering” the grid I guess you refer to the Column Moving feature, which I have enabled as well. I have changed one of the headers to have more text and one of the cells to have a longer number value in order to see if this would break the styling.
<!DOCTYPE html> <html> <head> <title>Sample</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.loader.js"></script> </head> <body> <table id="grid"></table> <script> $.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/", cssPath: "http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/", resources: "igGrid.*", ready: function () { let ds = [ { "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 3666666666666669 }, { "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 }, { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 10, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 11, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 }, { "ProductID": 12, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 13, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 14, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 15, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 16, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 17, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 }, { "ProductID": 18, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 19, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 20, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 21, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 }, { "ProductID": 22, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 23, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 24, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 25, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 26, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 27, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 }, { "ProductID": 28, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 29, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 30, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 31, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 }, { "ProductID": 32, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 33, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 34, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 35, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 36, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 37, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 }, { "ProductID": 38, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 39, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 40, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 41, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 }, { "ProductID": 42, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 43, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 44, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 45, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 46, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 47, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 }, { "ProductID": 48, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 49, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 50, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, ] $("#grid").igGrid({ dataSource: ds, responseDataKey: "results", primaryKey: "ProductID", height: '400px', autoCommit: false, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "150px", hidden: true}, { headerText: "Product Name", key: "ProductName", dataType: "string", width: "200px"}, { headerText: "Category", key: "CategoryName", dataType: "string", width: "200px"}, { headerText: "Units In StockUnits In StockUnits In StockUnits In Stock", key: "InStock", dataType: "number", width: "200px"} ], features: [ {name: "Sorting"}, {name: "ColumnMoving"}, {name: "Resizing"} ] }) } }) </script> </body> </html>
Maybe there is something in your particular grid configuration that I am missing and might be causing the problem? Is it possible that you provide a code sample where this behavior occurs so I could debug on my side and get to the root cause of the issue?
Does this flickering occur on all browsers? I tested on Google Chrome Version 67.0.3396.99 (Official Build) (64-bit), Mozilla Firefox 61.0 (64-bit) and Microsoft Edge 42.17134.1.0.
Best Regards,
Vasil Pavlov
Associate Software Developer
Infragistics, Inc.