Remove the window border

[Karthick Purushothaman]

Hi,

I have one Rad Window, inside the rad window am calling an aspx page with some controls.  I am getting border for Rad window and also for the aspx page. I want to display the Rad window without any border.

Is it possible for me to hide the border of the rad window.?

i tried to give BorderStyle="None" But still border is comming.

Please help me to sort it out.

Thanks & Regards,
Sushanth Mathew

[Shinu]

Hello,

Checkout the following forum which discusses how to hide border of RadWindow. I hope this would be of help.
Window without border

-Shinu.

[Georgi Tunev]

Hi Karthick,

Try setting the following properties

EnableEmbeddedSkins="false"
VisibleStatusbar="false"
VisibleTitlebar="false"



All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[loowool]

Hi Georgi,

I tried your trick:
   EnableEmbeddedSkins="false"
   VisibleStatusbar="false"
   VisibleTitlebar="false"
On a RadWindowManager, and it works fine:

<telerik:RadWindowManager ID="wM"
    runat="server"
    Overlay="true"
    ReloadOnShow="false"
    VisibleStatusbar="false"
    VisibleOnPageLoad="false"
    ShowContentDuringLoad="false"
    OnClientActivate="wMActivate"
    EnableEmbeddedSkins="false"
    OnClientClose="wMClose" >
    <Windows>
        <telerik:RadWindow ID="W0" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="W1" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="W2" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="W3" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="W4" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="W5" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="t9" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="n0" runat="server" BorderStyle="None" VisibleTitlebar="false" EnableViewState="true"  Behaviors="None"></telerik:RadWindow>
        <telerik:RadWindow ID="nW" runat="server" BorderStyle="Outset" VisibleTitlebar="true"  EnableViewState="false" Behaviors="Close,Maximize" ReloadOnShow="true"></telerik:RadWindow>
        <telerik:RadWindow ID="mW" runat="server" BorderStyle="Outset" VisibleTitlebar="true"  EnableViewState="true"  Behaviors="Maximize" ReloadOnShow="true" Modal="true"></telerik:RadWindow>
        <telerik:RadWindow ID="xW" runat="server" BorderStyle="Outset" VisibleTitlebar="true"  EnableViewState="false" Behaviors="Close" ReloadOnShow="true" ></telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

Except that Not all windows under the RadWindowManager should have no borders. As you can see above "nW", "mW", and "xW" should have normal borders, but they have no borders. If I use the EnableEmbeddedSkins="true" on any window, then all windows will have borders.

Please let me know how to achieve that
Thanks as Always
Salah A. Malaeb
TeknoBuild

[Marin Bratanov]

Hi Salah,

This happens because the RadWindows still have the CSS classed applied so that you can use your custom skin with them and when the skin is loaded by another RadWindow that does not have the EnableEmbeddedSkins set to false the browser will apply the background images to the other RadWindows as well.

What I would advise is that you leave the embedded skins available so that the RadWindows that should have borders have them and remove the borders for a certain skin that you will not be using, for example the Sunset skin:

.RadWindow_Sunset table .rwTopLeft,
.RadWindow_Sunset table .rwTopRight,
.RadWindow_Sunset table .rwFooterLeft,
.RadWindow_Sunset table .rwFooterRight,
.RadWindow_Sunset table .rwFooterCenter,
.RadWindow_Sunset table .rwBodyLeft,
.RadWindow_Sunset table .rwBodyRight,
.RadWindow_Sunset table .rwTitlebar,
.RadWindow_Sunset table .rwTopResize
   {
       background-image: none !important;
   }

Please note that this is the correct way to remove the borders of the RadWindow and properties such as BorderStyle, BorderWidth, etc are merely inherited from System.Web.Control and are not implemented in the RadWindow, since its borders are achieved via CSS, sprites and backgound images.

How this affects your RadWIndows - the ones that need no border will use the Sunset skin and the ones that should have borders have their skin available. The ones marked with orange will have no borders and the ones marked in green will have:

<telerik:RadWindowManager ID="wM" runat="server" Overlay="true" ReloadOnShow="false"
    VisibleStatusbar="false" VisibleOnPageLoad="false" ShowContentDuringLoad="false"
    OnClientActivate="wMActivate" OnClientClose="wMClose">
    <Windows>
        <telerik:RadWindow ID="W0" Skin="Sunset" runat="server" VisibleTitlebar="false" EnableViewState="true"
            Behaviors="None">
        </telerik:RadWindow>
        <telerik:RadWindow ID="W1" Skin="Sunset" runat="server" VisibleTitlebar="false" EnableViewState="true"
            Behaviors="None">
        </telerik:RadWindow>
        .....
        <telerik:RadWindow ID="nW" runat="server" VisibleTitlebar="true" EnableViewState="false"
            Behaviors="Close,Maximize" ReloadOnShow="true">
        </telerik:RadWindow>
        <telerik:RadWindow ID="mW" runat="server" VisibleTitlebar="true" EnableViewState="true"
            Behaviors="Maximize" ReloadOnShow="true" Modal="true">
        </telerik:RadWindow>
        <telerik:RadWindow ID="xW" runat="server" VisibleTitlebar="true" EnableViewState="false"
            Behaviors="Close" ReloadOnShow="true">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

All the best,
Marin
the Telerik team

[loowool]

Thanks a lot it works

But I still have a small issue. Please look at the screen shot attached, even though I followed the suggestion of removing the margins found in the post http://www.telerik.com/community/forums/aspnet-ajax/window/radwindow-padding-problem.aspx#1409001, I'm still getting the old non-visible border margins, as if the borders are still there.

Is there a way to get rid of this white space?
Thanks as Always.

[Bozhidar]

Hello,

To achieve that, you should change a little the CSS styles in the following way:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadWindow_Sunset table .rwTopLeft,
        .RadWindow_Sunset table .rwTopRight,
        .RadWindow_Sunset table .rwFooterLeft,
        .RadWindow_Sunset table .rwFooterRight,
        .RadWindow_Sunset table .rwFooterCenter,
        .RadWindow_Sunset table .rwBodyLeft,
        .RadWindow_Sunset table .rwBodyRight,
        .RadWindow_Sunset table .rwTitlebar,
        .RadWindow_Sunset table .rwTopResize,
        .RadWindow_Sunset table .rwIcon
        {
            display: none;
        }


    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="sm" runat="server" />
    <telerik:RadWindow ID="winImageEditor" runat="server" VisibleStatusbar="false" EnableViewState="true"
        Modal="false" Behaviors="None" Title="Edit Image" VisibleOnPageLoad="true" Skin="Sunset">
        <ContentTemplate>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra est eget
            dui euismod et congue tortor commodo. Fusce enim mauris, vehicula vel fringilla
            quis, rutrum et orci. Quisque in hendrerit orci. Nullam sagittis dignissim sapien,
            quis elementum dolor lobortis at.
        </ContentTemplate>
    </telerik:RadWindow>
    </form>
</body>
</html>

This will set to display: none the border cells.

Regards,
Bojo
the Telerik team

[loowool]

Thanks it works.