White space at the header of radgrid in different browsers

[saravanan k]

Hi,
 
         I think this is most commonly discussed defect about radgrid's cross browser compatibility. When i give static headers = true and enable scrolling, There appears a white space in the header on top of the scroll. PFA the snaps in different browsers.

Please suggest the solution.

Regards,
Saravanan K

[Pavlina]

Hello saravanan k,

The problem with the empty space above the RadGrid vertical scrollbar is characteristic for Firefox and is caused by a browser behavior. A possible workaround is to set a suitable background (like the header cell background) as a background to the RadGrid div:

div.RadGrid_SkinName
{
        background: url(......) 100% 0 repeat-x;
}

Kind regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[ADH]

This problem also occurs in IE8 in the Default skin for me. What do you recommend we do if we're using base skins and not importing the various graphics into our projects (because we're trying for something that's nearly seamlessly updateable as new versions of RadControls come out)?

[Pavlina]

Hello Ashley,

It is hard to determine the source of the problem based on the provided information. Can you try sending a sample illustrating the scenario implementation and the issue? We will check it out and turn back to you with our findings.

Best wishes,
Pavlina
the Telerik team

[martin]

I have a similar problem, it occurs when the header is higher than normal, see attachment.
How can I give the header above the scrollbar the same height as the other headers?

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" Height="335" Width="500" Skin="WebBlue">
<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
<MasterTableView AllowPaging="true" AllowSorting="true" PageSize="10" Width="467" >
</MasterTableView> 
<HeaderStyle Height="50" /> 
</telerik:RadGrid> 

gr Martin

[Pavlina]

Hi Martin,

The visual glitch is expected in IE8 and Firefox3
Browser Inconsistencies with Scrolling and Padding

Generally, I would suggest you to leave the empty space as is, if it's not a major showstopper for you. A possible, but not universal workaround is discussed at:
http://www.telerik.com/community/forums/aspnet-ajax/grid/ie-8-header-ui-problem.aspx

Kind regards,
Pavlina
the Telerik team

[Amit Dua]

Just add this class to header of your page

.RadGrid_Office2007 .rgHeaderDiv
       {
           margin-right: 0px !important;
       }

and replace office2007 with the name of the skin you are using and space will be gone.
Let me know if this solves your problem

[Amit Dua]

.RadGrid_WebBlue .rgHeaderDiv
       {
           margin-right: 0px !important;
       }

In your case

[Matthew]

First things first, I found this post a great starting place; however and unfortunately, it wasn't a complete solution for what I was trying to implement. With that said, I hope this help others that are looking for a more complete solution.

The process I went through was to start with Telerik's solution, but as stated above I didn't find this to be sufficient. The problem with Telerik's solution with the grid I was using was that when I removed the margin from the right, the header element shifted to the right as well making it look as if the data was miss-aligned with the headers. See image 'whitespacesolution_initialsolution.png'

The approach I took to fix the problem of the miss-aligned text was to do something like this (see code snippet below) where I used the built in developer tools in my browser to determine the right amount of padding:

.MyGridClass

        .rgHeaderDiv
        {
            margin-right: 0px !important;
        }

        .rgHeaderDiv > table
        {
            padding-right: 17px !important;
        }

With that fixed, I was still a little irritated with the border not extending over the scroll bar where the white space was. See image ''WhiteSpaceSolution_BorderSolution.PNG'

Putting it all together:

If AllowFilteringByColumn="false", use:

.MyGridClass

.rgHeaderDiv
{
    margin-right: 0px !important;
}

.rgHeaderDiv > table
{
    padding-right: 17px !important;
}

If AllowFilteringByColumn="true" AND using static height, use:

.MyGridClass

.rgHeaderDiv
{
    margin-right: 0px !important;
    padding-bottom:1px !important;
}

.rgHeaderDiv > table
{
    padding-right: 17px !important;
}

.rgFilterRow > td
{
    border-bottom: 0px solid #828282 !important;
}

.rgDataDiv
{
    border-top: 1px solid #828282 !important;
    margin-top: -1px !important
}

Regards,
Matt

FYI, All data in my grids, as shown in my images below, is confidential hence the ugly black bars.

[Pavlina]

Hi Matt,

Can you please specify which is the version of RadControls you are using in your project? If you are not using the latest version of the controls I suggest you try downloading it and see if you still encounter the same problems.

Regards,
Pavlina
Telerik

[Chris]

I've tried this with a number of different styled  grids (e.g. different combination of static/non-static headers and scrolling settings) 
, and this seems to work for all of them, with no adverse affects on the non-static headers:

.rgHeaderDiv
{
    margin-right: 0px !important;
    width:auto !important;
}

when there is a horizontal scroll bar and static headers, it does mean that the column headers continue above the scroll bar to the edge of the grid (as opposed to being filled with the background color). but that seems preferable to the white area.

FWIW, I'm using 2012 Q2 SP2 (I would love to use a newer version, but can't right now), the 'Simple' skin, and tested with Firefox, Chrome 29, and  IE8,9,10 (not in compatibility mode)

Chris

[Pavlina]

Hello Chris,

The best option for you would be to upgrade to the latest version of RadControls where this problem is already fixed. Using the latest official version of the controls will allow you to take advantage of all the other fixes included in it and the new features available.

However, if you still need a workaround for the problem you encounter with the older version of Telerik controls my advice is to open a support ticket and send a sample project which we can inspect locally. Thus we will be able to provide a proper solution for your case.

Regards,
Pavlina
Telerik