Resource header rendering problem for Forest, Hay, OutLook, Sunset, Web20, WebBlue, Windows7 skins

[Johan]

hi all,

I have a rendering problem with the resource headers of the following skins:

Forest, Hay, OutLook, Sunset, Web20, WebBlue, Windows7

When the header had multiple rows to fit the text in, there is a line at the bottom of the header that is not rendered correctly.
It seems the height is not calculated correctly.
I am evaluating the Telerik asp.net ajax controls using the trial version: 2010.3.1215.40

I cannot submit a defect but reproducing the problem is very simple: add some resources to a radscheduler and have them show a header. See screenshots in attachement.

Is there a way i/you can fix this?

regards,
Johan

[Kamen Bundev]

Hi Johan,

Currently the RadScheduler column headers get their backgrounds from a sprite which has a limited space for vertical expansion. You can easily override the background with an external image of your choice or just replace it with a solid color, like this:

div.RadScheduler .rsHorizontalHeaderTable th {

    background: #CCC;

}

Best wishes,
Kamen Bundev
the Telerik team

[Johan]

Hi Kamen,

If the implementation is limited, does this mean this is an unfinished implementation?
Is there going to be a follow up? If so, when?

regards,
Johan

[Kamen Bundev]

Hello Johan,

There are many factors at work here - we prefer to keep the sprite small in order to minimize the download size and to keep the browser memory usage low (images are kept 32bit uncompressed in momery in all browsers), on the other hand we don't want to place this image in an additional file since this is going to trigger a new unneeded request from the server leading to a load slow down. We may consider using CSS3 gradients and gradient filters for IE, but this solution has certain limitations (IE filters are unpredictable in some situations and CSS3 gradient support is not available in older browsers). The bottom line is that we may fix this issue, but I can't give you an exact time frame for that.

Best wishes,
Kamen Bundev
the Telerik team

[Johan]

Hi Kamen,

thank you for your clear reply.

I am left with a problem since setting the background to a solid color wouldn't look as good and using custom images... how do I obtain them?

And what size will be enough?

I guess I will have to limit the header text size.

regards,

Johan

[Kamen Bundev]

Hi Johan,

This CSS will use CSS3 and filters for header gradients in FF3.6+, Safari 3.1+, Chrome and IE6+, Sunset skin, for the rest of the browsers a gradient image with background will be used:
div.RadScheduler .rsHorizontalHeaderTable th
{
    background: #b94f0b url('images/headerBg.png') repeat-x 0 0;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#E06F57), to(#B9500C), color-stop(0.5, #BA3B01));
    background: -moz-linear-gradient(#E06F57, #BA3B01, #B9500C) repeat scroll 0 0 transparent;
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled='true', startColorstr=#FFE06F57, endColorstr=#FFB9500C);
}
._Telerik_Opera105 .RadScheduler .rsHorizontalHeaderTable th
{
    background: #b94f0b url('images/headerBg.png') repeat-x 0 0;
}

Use the attached image, just correct the CSS to point to where you place the image. If you don't like the filters in IE, just remove the filter and the image will be used instead.

To obtain the background, you need to open the RadScheduler rsSprite.png for the skin in question (you will find them in the skin's Scheduler subfolder), cut out the header background part and save it as a separate PNG image, check the one I'm sending to see how it should look like.

Kind regards,
Kamen Bundev
the Telerik team