background of style to fill whole page

[Jon]

I am using SkinManager and RadDecorator to apply skin to pages. This is working fine as long as the content fits the window size. If the content goes beyond the window size and the user needs to scroll down the page any skin with a background colour there is an issue. The background colour ends and as you scroll the remainder of the page the background is white. How do I extend the background to the height of the content?

[Danail Vasilev]

Hi Jon,

I have just replied to the same question that was asked by you in a support ticket and I paste my answer below, so that other forum members can benefit of it:


RadFormDecorator has five skins (i.e., Black, BlackMetrotouch, Glow, Office2010Black, Office2010Silver) which can decorate the "Zone"(i.e., the empty area on the page that has no controls but empty space or generic HTML tags like spans or divs) by applying background-color, and color. More information is available in What is Zone help article.

It seem as the content container's height is not enough to cover the height of decorated elements in large dimensions skins, so that its content overflows. If, however, RadFormDecorator is decorating only this content container, by setting its DecorationZoneID property , it is normal for the described issue to arise. If that is the case I can suggest that you try either step:
   - Decorate the whole page and not only the content page.
   - Increase the height of the content page.

You can find below an example that illustrates the mentioned issue:
ASPX

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="BlackMetroTouch"></telerik:RadSkinManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="div1"/>
    <div id="div1" style="height: 300px; border: 1px solid green;">
        <fieldset>
            <legend>my legend</legend>
            content in field set
        </fieldset>
        <fieldset>
            <legend>my legend</legend>
            content in field set
        </fieldset>
        <input type="button" name="name" value="button" /><br />
        <input type="button" name="name" value="button" /><br />
        <input type="text" name="name" value="textbox" /><br />
        <input type="text" name="name" value="textbox" /><br />
        <textarea>content</textarea>
    </div>
</form>

In order to handle the issue in the above example you can either remove the DecorationZoneID property of the decorator or increase the height of div1, for example from 300px to 500px.

If your scenario, however, is different than the mentioned one, could you please try to reproduce it with the above VS example and then send it back to us, so that we can proceed further with the investigation?


Regards,
Danail Vasilev
Telerik

 

 

[Jon]

Thanks... In my case as I had a single div wrapper as my zone for the whole page content removing the DecorationZoneID did the trick. I didn't realise that this was optional.