Background Image Not Tiling

[terrysmith]

The background image for the toolbar is not set to tile across the screen. On wide-format monitors the background image is not long enough and the horizontal alignment appears to be set to "right" instead of "left". This results in a blank area of the left-hand side of the toolbar where the background image is not tiled. Also, the problem appears with very wide HTML tables of data.

I'd like to request that it be set to left aligned by default and to tile horizontally in the next service pack. We're using the Office2007 skin and haven't tested it with other skins.

Thank you,
Terry

[Alex Gyoshev]

Hello Terry,

The problem with the tiling is somewhat deeper - due to performance optimization (multiple images are combined into a sprite to reduce the amount of HTTP requests sent to the server unfortunately, this way the backgrounds cannot be repeated beautifully). Nevertheless, most RadToolBar skins support widths up to 1600px which is sufficient in most scenarios - I am attaching an image (w:2400px) that will work with the following CSS to resolve your issue:

div.RadToolBar_Office2007 .rtbInner
{
    background-image: url("ToolbarBgH.gif");
}

 
All the best,
Alex
the Telerik team

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

[terrysmith]

I just got back to work on this issue, and what you sent me is not working. I've set EnableEmbeddedSkins = False and registered the CSS file with the page. The new image is not having any effect. I can change the background color in the "div.RadToolBar_Office2007 .rtbInner" class, so I know the stylesheet is being picked up.

Is is not possible to just force the toolbar background to be left aligned? I tried setting the alignment for the existing image in the stylesheet, but it doesn't have any effect either.

Thanks,
Terry

[Erjan Gavalji]

Hi Terry,

Can you verify that the image Alex sent you is used? Can you also change the class declaration a bit to:

div.RadToolBar_Office2007_Horizontal  .rtbInner
{
     background: url(ToolbarBgH.gif) 0 100% repeat-x !important;
}

Let me know if that helps.

Best regards,
Erjan Gavalji
the Telerik team

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

[terrysmith]

I believe your syntax for the background style is incorrect. The background color come before the image, but even when I correct it the toolbar is a solid blue color and does not have the 3D effect. The left and right ends of it do not render correctly either.

Why can't the control be changed to just left-align the image or to tile a 1 pixel wide background image horizontally? I think if you're not going to fix the actual bug then you should put in your documentation that the toolbar only supports displays up to 1600px wide.

[Dimo]

Hi Terry,

The 1600px width is a limitation of the particular skin, not a bug. RadToolBar supports any width. If one needs a larger width for a specific scenario, he/she is absolutely free to customize a given embedded skin or create a new one.

I am attaching a sample web page + a modified version of the Office2007 skin, supporting a width of up to 2400px. Actually, only two images have been expanded - ToolbarBgH.gif and ToolbarBgHTR.gif. The CSS code is the same.

Regards,
Dimo
the Telerik team

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

[terrysmith]

I'm thrilled with having to reapply this fix to our source code with every Telerik update that is released, but it does work.

Thank you,
Terry

[Dimo]

Hello Terry,

When using an external skin, there is no need to reapply anything when upgrading.

The only occasion when custom external skins cause troubles is when we change considerably the HTML, but this is rare.

Sincerely yours,
Dimo
the Telerik team

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

[Pino]

I have the same issue but with the Default theme.  Can you please provide the updated images?  Thanks.

[Dimo]

Hi Pino,

Here they are.


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.