[Solved] Header background bug on StaticHeader with checkbox column

[Rei]

I just upgraded from Prometheus and I noticed a slight GUI bug
The grid is set to static header with Skin Office2007. The header background on top of the scrollbar is shorter, showing ugly white background. I noticed that switching to skin Default and other skins with the same height as default, it rendered just fine. And if I remove the checkbox column, its also correct.

Screenshot below:
<img src=http://www.m1o.com/temp/bug-grid-staticheader.png />

Any quick hack would be greatly appreciated.

Regards,
Rei

[Dimo]

Hello Rei,

Thank you for providing a screenshot.

The visual glitch is caused by an existing limitation of most RadGrid skins - as you probably know, when using static headers, an empty space appears on the top-right corner of the control, just above the scrollbar. As of Q1 2008, this empty space is filled with the same background, which is used for the header cells. However, if the header cells expand vertically due to their content (as in your case), the background in the empty space does not expand or relocate automatically.

Possible workarounds are:

1) Prevent the checkbox from expanding the header cells. In order to do this, please add the following CSS rule somewhere to your web application stylesheet:

.GridHeader_Office2007  input
{
    margin-top: 0;
    margin-bottom: 0;
    height: 12px;
}

The above workaround is used in this online demo:

RadGrid - Outlook Grid Example


2) Relocate the background image in the top right corner manually by adjusting the background-position CSS style. In order to do this, please add :

div.GridHeaderDiv_Office2007
{
     background-position: 0  -1616px ;
}

1616px is the initial value in the Office2007 skin. In order to move the image downwards, you need to decrease the number, e.g. use  -1614px.


We will consider implementing a better solution for the top-right empty space for a future release.

Let us know how it goes.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael]

ver:  2008.1 619

I have a similar issue when adding a GridClientSelectColumn with static header for the skin:  WebBlue

The following code as suggested works:

.GridHeader_Office2007  input
{
    margin-top: 0;
    margin-bottom: 0;
    height: 12px;
}

It does not work though if I use the RadFormDecorator.  Is there any CSS that can correct this?

For now I am  using the decorationZoneID so the RadGrid is not styled, but I would like it too.

[Dimo]

Hi Michael,

I suppose the decorated checkbox is bigger than the standard one and that is why it expands the header cells vertically.

In this case the workaround should be to adjust the background position of the GridHeaderDiv_Skin div (as suggested earlier) or replace the background image with a custom one.

Let us know if you need help with that.


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael]

Hi Dimo,

I tried to reposition the background position, but I couldn't get anything to happen.  I appreciate any help you might have on positioning the original sprite.gif image to work with the FormDecorator.

For now, I decided to go forward with taking a screen shot of the grid and cutting out a little part of the header.

I had to do the following to make that background replacement work:

.GridHeader_WebBlue, div.GridHeaderDiv_WebBlue
{
    background:#bbc6d2 url('Images/WebBlue/WebBlueHeaderDivReplacement.gif') 0 0 repeat-x;
}

Regards,

Michael

[Dimo]

Hello Michael,

Actually, this is the best workaround available for your scenario, so you are good to go.

The current HTML of RadGrid puts a limitation on the top-right area styling. We are aware of this and will try to fix it for a future release of the control. I am sorry for the inconvenience.


Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center