Frameless Window

3 posts, 0 answers
  1. Javier
    Javier avatar
    3 posts
    Member since:
    Jun 2008

    Posted 30 Aug 2011 Link to this post

    Hi,

    I'm trying to use radwindow in site that will be used from mobile devices (also from PCs, that is already working and using radwindows). To maximize space, I want to remove the frame from the rad window, and only preset the closing X button, using all the size for the content.

    Is this possible? examples?

    Thanks

    Javier Rodríguez 
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Aug 2011 Link to this post

    Hello Javier,

    If you want to change the look of the RadWindow control, you need to modify its skin. More information on how to use and modify the control's skin is available in the Customizing Appearance section of the documentation.
    Skins.

    Thanks,
    Princy.
  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4651 posts

    Posted 31 Aug 2011 Link to this post

    Hi guys,

    You can simply override one of the built-in skins' CSS so that there are no borders. For example with 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
       }

    A RadWindow as follows:
    <telerik:RadWindow ID="W0" Skin="Sunset" runat="server" VisibleOnPageLoad="true" Behaviors="Move,Close"></telerik:RadWindow>

    Will have no borders, not title bar (or rather a transparen titlebar) - only a close button and the RadWindow's icon (which you can remove via CSS as well).

    If you are using the ContentTemplate of the RadWindow you could remove the titlebar altogether (VisibleTitleBar=false) and declare an absolutely positioned button in its content template that will call the RadWindow's close method via JavaScript. I am referring to the ContentTemplate, as in this case you could position the button outside of the content container via CSS, while this is impossible if an external page is loaded, as all content would then be limited to the iframe. Well, you could still keep the button to the top right corner, but there is a chance it would obscure some content. Here follows a small example for such a button:
    <telerik:RadWindow ID="W0" Skin="Sunset" runat="server" VisibleTitlebar="false" VisibleOnPageLoad="true" Behaviors="Move">
        <ContentTemplate>
            <asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="dialog_close_button.png" OnClientClick="$find('W0').close(); return false;" Style="position: absolute; right: -20px; top: -20px;" />
        </ContentTemplate>
    </telerik:RadWindow>


    Greetings,
    Marin
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top