Radwindow has different media query applied as parent page because of its dimension

[Vasssek]

Hello Telerik Team,

Could you please help me with my issue ? My intention is to have completely responsive app with responsive design, elasticitiy, etc.  I use RadPageLayout and also css files with media query based on resolution from this page http://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/creating-responsive-design/viewport-breakpoints

So far everything is working fine, but now I want to use a discussion forum with radwindow control for a new thread. Declaration of current radwindow is here:

<telerik:RadWindow
                   NavigateUrl="~/Pages/EditForm/Helper/ForumBoardInWindow.aspx" runat="server" Behaviors="Close,Move, Resize"
                   ID="ForumBoardWindow" VisibleStatusbar="false" Width="620px" Height="388px"  Modal="false" KeepInScreenBounds="true"  >
               </telerik:RadWindow>

The problem is that radwindow fixed width and height (iframe) has taken media query from css file as a small screen resolution, even web browser (IE, Firefox) is running on 23'' display - 1920 x 1080 pixels resolution. The result is smaller displayed font as parent page has.

@media only screen and (min-width: 361px) and (max-width: 768px) {
    body {
        font-size: 11px;
        background-color:Fuchsia;
    }
}

Parent page looks good, it is evaluated as extra large screen.

@media only screen and (min-width: 1281px) {
    body {
        font-size: 16px;
    }
}

So I have two issues:

1. How to set the same media query resolution for a radwindow control as parent page has, based on actual web browser size ?

2. How to proportionally resize rad window control when user resize web browser (IE, Firefox), or application will be opened on smaller devices (tablet, mobile phone) ?

Thank you for your help and assistance.

Best regards

Vasssek

[Slav]

Hi Vasssek,

This happens because the content of RadWindow is loaded in an iframe as you mentioned and the iframe has a different context than the page. In this context the font size is configured according to the size of the RadWindow control and not the parent page.

There are two approaches you can use in this case. The first one is to set the content of the window via ContentTemplate (http://demos.telerik.com/aspnet-ajax/window/examples/internalcontent/defaultcs.aspx), which should result in changing the font size in the content with the size of the parent page, because the content is now part of that page.

The other possible approach is to keep using the NavigateUrl property of RadWindow for setting its content and set a bigger size for the window or resize the window via its client-side API according to the size of the parent page (check set_width and set_height methods in http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object).

Regards,
Slav
Telerik

[Vasssek]

Hello Slav,

Thank you for your explanation. Now, I know the possibilities. Probably, I will transfer all controls and logic from separate web page to RadWindow via ContentTemplate...

Best regards

Vasssek