Dragging a Column in RadGrid Displays a Large White Box
Environment
Product | RadGrid for ASP.NET AJAX |
Version | 2022.2.622 |
Description
When dragging a column to a new position in a RadGrid with virtual scroll paging enabled, a large white box appears instead of matching the width of the column. This behavior is caused by CSS rules overriding the dragger's styling, making it stretch across the screen.
Cause
The issue occurs because RadGrid generates a floating dragger element styled with dimensions matching the column width. If global CSS rules applied to table
, tr
, or td
elements on the page override these styles (e.g., width: 100%
or display: block
), the dragger element expands beyond the intended size.
Solution
To achieve the correct behavior, apply CSS overrides to constrain the dragger's width. Follow these steps:
-
Open the browser's Developer Tools by pressing F12.
-
Use the following script to pause execution while dragging a column:
javascriptsetTimeout(function(){ debugger; }, 3000);
-
Drag a column header and inspect the
<div>
element with classes likergHeader rgHeaderOver RadGrid RadGrid_Silk
and its<table>
child. -
Inspect your site stylesheets for global CSS rules applied to
table
,tr
, ortd
elements, and ensure they do not override RadGrid's styling. Applying the above CSS constraints resolves the issue. -
Alternatively apply the following CSS rules to limit the dragger's width:
Limit the dragger width to its content:
cssdiv.rgHeaderOver table { width: auto !important; table-layout: auto !important; }
Force the dragger to match the column width:
cssdiv.rgHeaderOver { width: auto !important; max-width: 200px; /* Adjust to the column width */ } div.rgHeaderOver table { width: auto !important; }