background of style to fill whole page

3 posts, 1 answers
  1. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 15 Jul 2014 Link to this post

    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?
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 18 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 18 Jul 2014 in reply to Danail Vasilev Link to this post

    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.
Back to Top