This is a migrated thread and some comments may be shown as answers.

White space at the header of radgrid in different browsers

11 Answers 199 Views
Grid
This is a migrated thread and some comments may be shown as answers.
saravanan k
Top achievements
Rank 1
saravanan k asked on 07 Jun 2010, 07:39 AM
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

11 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 07 Jun 2010, 09:02 AM
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.
0
ADH
Top achievements
Rank 1
answered on 17 Aug 2010, 09:28 PM
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)?
0
Pavlina
Telerik team
answered on 18 Aug 2010, 08:23 AM
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
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
0
martin
Top achievements
Rank 1
answered on 25 Aug 2010, 07:32 PM
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
0
Pavlina
Telerik team
answered on 26 Aug 2010, 03:10 PM
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
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
0
Amit Dua
Top achievements
Rank 1
answered on 26 Aug 2010, 11:28 PM
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
0
Amit Dua
Top achievements
Rank 1
answered on 26 Aug 2010, 11:30 PM

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

In your case
0
Matthew
Top achievements
Rank 1
answered on 14 Aug 2013, 10:46 PM
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.
0
Pavlina
Telerik team
answered on 19 Aug 2013, 07:30 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Chris
Top achievements
Rank 1
answered on 06 Sep 2013, 03:47 PM
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
0
Pavlina
Telerik team
answered on 11 Sep 2013, 06:35 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
saravanan k
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
ADH
Top achievements
Rank 1
martin
Top achievements
Rank 1
Amit Dua
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or