Rad window shows no scrollbars in chrome

6 posts, 0 answers
  1. Nick
    Nick avatar
    23 posts
    Member since:
    Jan 2012

    Posted 20 Jun Link to this post

    Hello Telerik!

    I need your help urgently. I am stuck in this problem since 2 days. I have a Rad Window which is opened in javascript. This window is opened as maximized using oWnd.maximize();

    This window's content .aspx page is having a RadTabStrip with RadMultiPageView. The width of RadMultiPage is set in Pixels.

     When I restore the window and resize it , It should be showing the scroll bars as now the content of the window is beyond the size of the window. And this is what happens in FF and IE.. which is correct but I don't see any scrolls in the Chrome. 

     

    I have spent a lot of time in this issue and still not able to figure it out... Kindly help me with this problem... or is this a known Chrome issue as it works fine in FF and IE.

     

    Regards,

    Nick.

     

  2. Nick
    Nick avatar
    23 posts
    Member since:
    Jan 2012

    Posted 21 Jun Link to this post

    Sorry...forgot to mention that scrollbars are visible while I am resizing (manually) the radwindow but they disappear as soon as I leave the mouse button...

    This is urgent... please ...

    Thanks!..

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 23 Jun Link to this post

    Hi Nick,

    This is not a known issue with RadWindow and it sounds like something is going wrong with the CSS rules in the content page for smaller viewports. RadWindow is just an iframe from the point of view of the content page: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/common-issues#general-troubleshooting.

    What I can suggest you look into at this point is the following:

    • ensure you are using the latest version of the suite (R2 2016 SP1 at the time of writing)
    • try the Lightweight Render Mode: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/render-modes.
    • ensure the page markup is valid
    • make sure there are no script errors
    • ensure Chrome is not running in mobile browser emulation mode, because in this case scrollbars are not shown unless you are scrolling (this is a mobile device behavior)

    Also, here is an example that works properly on my end:

    <!DOCTYPE html>
     
        <head runat="server">
            <title></title>
            <style>
                .fillContainer
                {
                    width: 100%;
                    height: 300px;
                    overflow: auto;
                }
                .large
                {
                    width: 600px;
                    height: 600px;
                    background: yellow;
                }
            </style>
        </head>
        <body>
            <form id="form1" runat="server">
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
                <telerik:RadTabStrip runat="server" ID="rts1" MultiPageID="rmp1" Width="200px">
                    <Tabs>
                        <telerik:RadTab Text="first" Selected="true"></telerik:RadTab>
                        <telerik:RadTab Text="second"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="rmp1" Width="200px">
                    <telerik:RadPageView ID="RadPageView1" runat="server" Width="200px" Selected="true">
                        <div class="fillContainer">
                            <div class="large"></div>
                            I am content after the large div
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView2" runat="server" Width="200px">second page view</telerik:RadPageView>
                </telerik:RadMultiPage>
            </form>
        </body>
    </html>

    placed inside a very simple dialog for the sake of testing:

    <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" RenderMode="Lightweight" NavigateUrl="Default3.aspx"></telerik:RadWindow>

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Nick
    Nick avatar
    23 posts
    Member since:
    Jan 2012

    Posted 23 Jun in reply to Marin Bratanov Link to this post

    Hi Marin..

    Thank you very much for your reply... I will recheck everything and try the solution provided by you.. And will let you know if the problem solves...

    Regards,

    Nick..

     

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 04 Jul Link to this post

    Hi Nick,

    There is an issue in Chrome browser, related to scrollbars disappearing in iframes when their visibility is toggled. The issue has been reported to Chrome and can be reproduced with the code below:
    HtmlPage.html:
            <script>
                function showIframe() {
                    document.getElementById("iframe1").style.display = "";
                }
                function hideIframe() {
                    document.getElementById("iframe1").style.display = "none";
                }
            </script>
            <input type="button" name="name" value="Show Iframe" onclick="showIframe(); return false;" />
            <input type="button" name="name" value="Hide Iframe" onclick="hideIframe(); return false;" />
            <iframe id="iframe1" src="HtmlPage2"></iframe>
    HtmlPage2.html:
    <body>
        <div style="border: 1px solid green; height: 1200px;">
        </div>
    </body>

    To workaround this issue in RadWindow with iframe you can either set the ReloadOnShow property to true, or reset the width/height of the iframe element:
    Copy Code
    function clientShow(sender, args) {
        var frameWidth = sender.GetContentFrame().style.width;
        sender.GetContentFrame().style.width = "";
        setTimeout(function () {
            sender.GetContentFrame().style.width = frameWidth;
        }, 0);
    }
    Copy Code
    <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="HtmlPage2.html"OnClientShow="clientShow"></telerik:RadWindow>



    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Nick
    Nick avatar
    23 posts
    Member since:
    Jan 2012

    Posted 06 Jul in reply to Danail Vasilev Link to this post

    Hello Danail 

    Thank you for your reply... I will try the provided workaround. And will let you know if it solves my problem.

    I will be working again on this in few days..

     

    Thanks again..

    Nick.

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017