Window without border

[Cedric Debattista]

Hi, I would like to create an RADWindow without border, is this possibile?

[Svetlina Anati]

Hi Cedric,

I am not quite sure why exactly you need to remove the RadWindow border - probably it would be easier to use a standard IFRAME element for your particular scenario instead of RadWindow.

Let's assume that you have the following declaration:

 <telerik:RadWindow ID="rwOpenWindow" runat="server" NavigateUrl="http://www.telerik.com">
                </telerik:RadWindow>

You should use the following CSS in order to remove the borders:

 .corner,
    .topresize,
    .footercenter
    {
        display: none !important;
    }

    .titlebar
    {
        background-position: 0 -6px !important;
    }

Regards,
Svetlina
the Telerik team

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

[Emanuele Savarese]

I downloaded and installed Q1 2009.
In this version there are a lot of improvements in css structure and theme appearance but style changes described in previous post doesn't work.

Please can you help me to create a style that accomplish same behaviour but with Q1 2009 version?

Thanks in advance,
Emanuele Savarese

[Tervel]

Hello Emanuele,

To streamline all RadControls' CSS naming conventions now each RadControl features a prefix for each of its CSS classnames. In the case of RadWindow the prefix is rw, so the classes you refer to have been renamed as such:

.corner   = .rwCorner
.topresize = .rwTopResize
.footercenter = .rwFooterCenter
.titlebar = rwTitlebar

Best wishes,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Brad]

Going down this road.......

I'd like to be able to open RadWindows I currently have working without ANY titlebar buttons or title bar. I'd like as small a border as possible strictly as a way to resize the windows. Don't need to move them although that would be nice. IFrames would work if I could generate them based on a template but since I already have the RadWindows working exactly as I'd like I rather stay with them. If I needed to edit a window template strictly for this application I guess I could do that if  had a general idea how (have heard Blend mentioned) to do that and where the original template is.

Thanks,

Joe B 

[Georgi Tunev]

Hi Joe,

I believe that the following documentation article will be of help:
http://www.telerik.com/help/aspnet-ajax/appearance-css-classes-usage.html

There you can see how to create your own, custom skin for the RadWindow,  that matches your requirement. If you wish to remove the titlebar and the statusbar only, you can use the VisibleStatusBar and VisibleTitleBar properties.


Kind regards,
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.

[Brad]

Thanks Georgi, as always you're a great resource. This is what I was looking for. Can't post a rating on this thread but I give you a 10 out of 10. Thanks again,

Joe B

[Brad]

Just when I thought I understood....

I've gone in and followed the example making a "new" window skin (CTSkin) by copying and modifying the default window documents, and am using RadWindowManager to open windows:

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Behavior="Default"

        InitialBehavior="None" Left="" Style="display: none;" Top="" VisibleStatusbar="false"

        Behaviors="Resize, Minimize, Close, Move" MinimizeZoneID="Panel1" OffsetElementID="Panel1"

        VisibleOnPageLoad="True" KeepInScreenBounds="false" Height="600px" Skin="CTSkin"

        EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

    </telerik:RadWindowManager>

I get the standard default window. So I try to do it in small steps. I have a var wnd which is initialized with: 

            var wnd = null;

            wnd = radopen("Client.aspx", null);

I can move and resize the window with:

                wnd.set_height(750);

                wnd.set_width(1000);

                wnd.center();

But when I try to execute this:

                wnd.set_VisibleTitlebar(false);

I get an error message "Object doesn't support this property or method"

Any ideas where the syntax is wrong?

Thanks,

Joe B

[Georgi Tunev]

Hello Joe,

JavaScript is case-sensitive and the correct name of the method is
set_visibleTitlebar();


I hope this helps.

Best wishes,
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.

[Brad]

Unbelievable!

All I want is a RadWindow with no titlebar, no border that I can locate anywhere I want. It's what management wants. I don't want to use an iFrame. I've spent WEEKS trying to figure this out and asking how to do it and I'm still in the same place. Without an answer. And because of the issues we've had with upgrades in the past I can't move off the version we are on.

jb

[Georgi Tunev]

Hello Joe,

In such case I suggest to open a support ticket and to send me a small sample project that shows your current setup along with an edited screenshot that shows what exactly you want to achieve. I will check it and do my best to help you.


Kind regards,
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.

[Emanuele Savarese]

Hi,
to display a RadWindow without any border, title, footer, etc. I used this tip.

It's works with latest version of Telerik ASP.NET controls (and with some changes also in older version)

Change "RadWindowWrapper" with client name of your RadWindow. In alternative you can remove the css selector #... to apply this style to all RadWindow in your page.

 

#RadWindowWrapper .rwCorner,
#RadWindowWrapper .rwTopResize,
#RadWindowWrapper .rwFooterCenter,
#RadWindowWrapper .rwTitlebar
{
    display: none !important;
}


#RadWindowWrapper .rwTitlebar
{
    background-position: 0 -6px !important;
}

This is RadWindow markup sample:

 

            <telerik:RadWindow ID="RadWindowWrapper" runat="server" VisibleStatusbar="False"
                Modal="True" Behavior="Close" ShowContentDuringLoad="False" Title="My borderless RadWindow"
                BorderStyle="None" BorderColor="#D5D5D5" DestroyOnClose="False" VisibleTitlebar="false"
                Visible="false" VisibleOnPageLoad="false" Height="250px" Width="375px">
            </telerik:RadWindow>

good luck,
Emanuele

[Brad]

Hey Emanuele,

yup, that did it (with a little tweaking)

Thanks!!!!!!!

Joe B

[Joe]

I'm still trying to figure this one out, please share any tweaks you made.  I've tried some of the earlier examples to no avail.  I want the border to be invisible so I can have a pop-up login panel.  Will I have to drop the control on to the page or can I get away with the iframe type of popup?

I'm also trying to figure out how I can make the modal cover-up in the background as black so people can't see the page.  This would be for security since it's a financial system.  Don't want people to be able to see what someone else was working on if the login box pops up.  Thanks

[Georgi Tunev]

Hi Joe,

Try the following setup:

<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .titlerow, .corner.bodyright, .corner.bodyleft, .corner.footerleft, .footercenter, .corner.footerright, .statusbarrow
        {
            visibility: hidden;
        }
        div.TelerikModalOverlay
        {
            background: black;
            background-color: Black !important;
            filter: alpha(opacity=100) !important;
            opacity: 1 !important;
            -moz-opacity: 1 !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindow ID="RadWindow1" Modal="true" EnableEmbeddedSkins="false" VisibleTitlebar="false"
        VisibleStatusbar="false" runat="server" VisibleOnPageLoad="true" NavigateUrl="http://www.google.com">
    </telerik:RadWindow>
    </form>
</body>
</html>

Sincerely yours,
Georgi Tunev
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.

[Mike]

what if I have several skinned windows and only one of them I want to be border-less? how do I override the CSS of rthat specific window, i tried the selector name before with no suceess

[Marin Bratanov]

Hi Mike,

You can use the CssClass property of the given RadWIndow to set a custom class for its popup in order to cascade through it. This is explained here: http://www.telerik.com/help/aspnet-ajax/window-appearance-removing-borders.html.
Try this, and replace .RadWindow_Sunset with .myClass:

<telerik:RadWindow runat="server" ID="RadWindow1" CssClass="myClass" NavigateUrl="http://www.telerik.com/">
</telerik:RadWindow>

Regards,
Marin Bratanov
Telerik