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

3 posts, 1 answers
  1. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 03 Jul 2015 Link to this post

    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

  2. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 08 Jul 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 08 Jul 2015 in reply to Slav Link to this post

    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

Back to Top