Window without border

17 posts, 0 answers
  1. Cedric Debattista
    Cedric Debattista avatar
    17 posts
    Member since:
    Mar 2007

    Posted 28 Jul 2008 Link to this post

    Hi, I would like to create an RADWindow without border, is this possibile?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Jul 2008 Link to this post

    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  
        {  
            displaynone !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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Emanuele Savarese
    Emanuele Savarese avatar
    14 posts
    Member since:
    Apr 2007

    Posted 16 Mar 2009 Link to this post

    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
  5. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 16 Mar 2009 Link to this post

    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.
  6. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 17 Nov 2009 Link to this post

    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 
  7. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 18 Nov 2009 Link to this post

    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.
  8. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 18 Nov 2009 Link to this post

    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
  9. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 18 Nov 2009 Link to this post

    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
  10. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 19 Nov 2009 Link to this post

    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.
  11. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 07 Dec 2009 Link to this post

    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
  12. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 09 Dec 2009 Link to this post

    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.
  13. Emanuele Savarese
    Emanuele Savarese avatar
    14 posts
    Member since:
    Apr 2007

    Posted 09 Dec 2009 Link to this post

    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

  14. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 09 Dec 2009 Link to this post

    Hey Emanuele,

    yup, that did it (with a little tweaking)

    Thanks!!!!!!!

    Joe B
  15. Joe
    Joe avatar
    1 posts
    Member since:
    Nov 2008

    Posted 22 Mar 2010 Link to this post

    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
  16. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 24 Mar 2010 Link to this post

    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">
    <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.
  17. Mike
    Mike avatar
    9 posts
    Member since:
    Jun 2009

    Posted 19 Nov 2013 Link to this post


    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
  18. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017