Frameless Window

[Javier]

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 

[Princy]

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.

[Marin Bratanov]

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