Funny looking radWindow problem

4 posts, 1 answers
  1. FISCAL
    FISCAL avatar
    91 posts
    Member since:
    May 2010

    Posted 10 Nov 2010 Link to this post

    HI,

    I am following this documentation to have radWindow in my application as well. 
    http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window

    The trouble is the radWindow being popped-up has funny unwanted borders - series of rectangles in the bottom. Please see the attached screen being highlighted in YELLOW :)

    Could you please anyone hint me the problem?

    Many thanks.

    MG
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 10 Nov 2010 Link to this post

    Hello M G,

    I have put on a single page RadWindow using 2010.2.929 version of Telerik Controls and everything seems OK in all major browsers. Please find the following code to test it on a single page:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSkinManager ID="rs1" runat="server" ShowChooser="true"></telerik:RadSkinManager>
        <br /><br />
        <telerik:RadWindow ID="rw1" runat="server" VisibleOnPageLoad="true" Width="300" Height="300"
            Top="50" Left="20" EnableShadow="true" Behaviors="Default">
        </telerik:RadWindow>
        </form>
    </body>
    </html>

    From the picture attached, I would suggest that you have some global CSS styles applied to elements like: TABLE, TR, TD, UL and/or LI. If you have one, it will apply some additional styles to the controls and could case similar layout that could be seen at your picture. Please find a code, with some additional styles applied, marked in yellow, that breaks the first code:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
        table, tr, ul, li, td {padding: 10px; height: 40px;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSkinManager ID="rs1" runat="server" ShowChooser="true"></telerik:RadSkinManager>
        <br /><br />
        <telerik:RadWindow ID="rw1" runat="server" VisibleOnPageLoad="true" Width="300" Height="300"
            Top="50" Left="20" EnableShadow="true" Behaviors="Default">
        </telerik:RadWindow>
        </form>
    </body>
    </html>

    The second code will show the window as it is in brokenwidnow.png image attached. If you have any global styles in your application, similar to these in the second example, please consider to use CSS class names instead applying global styles.

    If you still experience the problem, open a support ticket and send us a live url or a sample project, where the problem exists, to investigate it further.

    Greetings,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. FISCAL
    FISCAL avatar
    91 posts
    Member since:
    May 2010

    Posted 11 Nov 2010 Link to this post

    Many thanks Bojo - it was a problem in my global CSS setting.
  4. Munna
    Munna avatar
    3 posts
    Member since:
    Apr 2012

    Posted 28 May 2012 Link to this post

    U can solve this problem by adding a cssclass to your radwindow.

    Don't forget to add a to your cssclass which you can see below.

    .radHideExtraDesign a
    {
    padding-top:0px;
    padding-bottom:0px;
    }
Back to Top