iPad scrolling

18 posts, 0 answers
  1. Erik Kleinreesink
    Erik Kleinreesink avatar
    10 posts
    Member since:
    Nov 2008

    Posted 11 Jul 2012 Link to this post

    I'm in the process of making my web application compatible with iPad (Safari).
    The problem is a RadPane, with Scrolling set to both, but also a ContentUrl set, will not scroll on an iPad.
    In cases were no CententUrl is set, scrolling works fine.
    Also scrolling (with ContentUrl is set) works fine on PC browsers.
    Is there a solution or workaround for this?
  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 16 Jul 2012 Link to this post

    Hello Erik,

    There is a known issue with the scrolling in iframes for mobile Safari. This is the reason you are experincing an issue when ContentUrl is set. However there is a workaround for the webkit browsers. You could check the following URLs: http://www.telerik.com/community/forums/aspnet-ajax/window/ipad-iphone-support.aspx and http://stackoverflow.com/questions/4599153/iframes-and-the-safari-on-the-ipad-how-can-the-user-scroll-the-content . Actually it is necessary to apply the following style into the DIV element that is wrapping the iframe:

    -webkit-overflow-scrolling: touch !important ;
           overflow-y: scroll !important;

    In case of the RadSplitter you need to apply the workaround to the RadPane:
    Here is an example:

    <head runat="server">
        <style type="text/css">
       
         
        #RAD_SPLITTER_PANE_CONTENT_Radpane1_1
        {
            -webkit-overflow-scrolling: touch !important ;
            overflow-y: scroll !important;
             
            }
         
        </style>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
       
     
       <telerik:RadSplitter ID="Radsplitter" Height="150px" Width="140px" runat="server">
                        <telerik:RadPane ID="Radpane1_1" runat="server" Width="400px" ContentUrl="http://www.telerik.com">
                        </telerik:RadPane>
                </telerik:RadSplitter>
     
        </form>
    </body>
    </html>

    I hope this helps.

    Best Regards,
    Misho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ToltingColtAcres
    ToltingColtAcres avatar
    83 posts
    Member since:
    Nov 2010

    Posted 25 Jul 2012 Link to this post

    I have attempted to implement this solution, but it does not work for me.

    I am developing an application where the top portion of the page displays a PDF, and the bottom pane has various rad controls for data entry to update a database based on user interaction.

    The top iframe (where the PDF displays) works great. I can two-finger scroll thru the PDF file.

    The bottom frame will not scroll at all. Any attempt to scroll will scroll the entire page.

    Any assistance would be helpful, I've been messing around w/ this for 2 days now trying to get it to work.

    My "Main" Page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PDFReview.aspx.cs" Inherits="PDFReview" %>
    <%@ Register src="NavigationMenu.ascx" tagname="NavigationMenu" tagprefix="uc1" %>
     
    <html>
        <head id="Head1" runat="server">
            <title></title>
            <style type="text/css"
                html, body, form 
                
                height: 100%;
                width: 100%; 
                margin: 0px; 
                padding: 0px; 
                }
            </style>
        </head>
        <body>
                <uc1:NavigationMenu ID="NavigationMenu1" runat="server" />
                <telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="25px" LiveResize="true" Orientation="Horizontal" Height="100%" Width="100%">
                    <telerik:RadPane ID="RadPane1" runat="server">
                    <div id="scroller" style="height: 100%; width: 100%; overflow: auto;">
                    <iframe runat="server" src="ShowPDF.aspx" width="100%" height="100%" scrolling="yes" style="-webkit-overflow-scrolling:touch"/>
                    </div>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" Height="25px"></telerik:RadSplitBar>
                    <telerik:RadPane ID="RadPane2" runat="server">
                    <div id="Div1" style="height: 100%; width: 100%; overflow: auto;">
                    <iframe id="Iframe1" runat="server" src="PDFDataEdit.aspx" width="100%" height="100%" scrolling="yes" style="-webkit-overflow-scrolling:touch"/>
                    </div>
                    </telerik:RadPane>
                </telerik:RadSplitter>
        </body>
    </html>

    The code from PDFDataEdit.aspx which is relevant is as follows:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PDFDataEdit.aspx.cs" Inherits="PDFDataEdit" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <html>
        <head runat="server">
            <title></title>
            <style type="text/css">
                .style1
                {
                vertical-align: middle; text-align: center; -webkit-overflow-scrolling:touch;
                }
                .style3
                {
                vertical-align: middle; text-align: left; -webkit-overflow-scrolling:touch;
                }
            </style>
        </head>
        <body class="style3">
            <form id="form1" runat="server" >
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                <asp:SqlDataSource ... stuff is here />
                <telerik:RadGrid ID="RadGrid_Comments"  runat="server" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" Width="100%"
                                 DataSourceID="SqlDataSource_Comments" OnInsertCommand="RadGrid_Comments_Insert" >
                    <MasterTableView DataKeyNames="GUIDKey" CommandItemDisplay="Top" CommandItemSettings-ShowAddNewRecordButton="true" >
                        <Columns>
                            <telerik:GridBoundColumn DataField="UpdatedOn"         HeaderText="Date:"    UniqueName="UpdatedOn" DataFormatString="{0:g}"   HeaderStyle-Width="150px" ItemStyle-Width="150px"  ItemStyle-VerticalAlign="Top"/>
                            <telerik:GridBoundColumn DataField="Employee"          HeaderText="By:"      UniqueName="Employee"  HeaderStyle-Width="150px" ItemStyle-Width="150px"  ItemStyle-VerticalAlign="Top"/>
                            <telerik:GridBoundColumn DataField="Role"              HeaderText="Role:"    UniqueName="Role"    HeaderStyle-Width="100px" ItemStyle-Width="100px"  ItemStyle-VerticalAlign="Top"/>
                            <telerik:GridBoundColumn DataField="Comment"           HeaderText="Comment:" UniqueName="Comment" SortExpression="Comment" HeaderStyle-Width="600px" ItemStyle-Width="600px" />
                        </Columns>
                        <EditFormSettings UserControlName="EditReportComments.ascx" EditFormType="WebUserControl">
                            <EditColumn UniqueName="EditCommandColumn1"></EditColumn>
                        </EditFormSettings>
                    </MasterTableView>
                </telerik:RadGrid>
            </form>
        </body>
    </html>
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 30 Jul 2012 Link to this post

    Hi Michael,

    You have applied the -webkit-overflow-scrolling:touch CSS rule to the nested <iframe> element while it should be applied to the <div> that is wrapping it, e.g.:
    <telerik:RadPane ID="RadPane1" runat="server">
        <div id="scroller" style="height: 100%; width: 100%; -webkit-overflow-scrolling: touch; overflow-y: scroll;">
            <iframe id="Iframe1" runat="server" src="ShowPDF.aspx" width="100%" height="100%" scrolling="yes"/>
        </div>
    </telerik:RadPane>


    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. ToltingColtAcres
    ToltingColtAcres avatar
    83 posts
    Member since:
    Nov 2010

    Posted 03 Aug 2012 Link to this post

    Thank you. solved the problem perfectly.
  7. ToltingColtAcres
    ToltingColtAcres avatar
    83 posts
    Member since:
    Nov 2010

    Posted 08 Aug 2012 Link to this post

    Upgraded my project to v2012.2.724.40 from v2012.2.607.40, and now the following code will not work. Attempted to switch back to .607, and of course, it continues not to work. What am I missing?  --frustrated--
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PDFReview.aspx.cs" Inherits="PDFReview" %>
    <%@ Register src="NavigationMenu.ascx" tagname="NavigationMenu" tagprefix="uc1" %>
     
    <html>
        <head id="Head1" runat="server">
            <title></title>
            <style type="text/css"
                html, body, form 
                
                height: 100%;
                width: 100%; 
                margin: 0px; 
                padding: 0px; 
                }
            </style>
        </head>
        <body>
            <uc1:NavigationMenu ID="NavigationMenu1" runat="server" />
            <telerik:RadSplitter ID="RadSplitter_PDFReview" runat="server" SplitBarsSize="25px" LiveResize="true" Orientation="Horizontal" Height="100%" Width="100%">
                <telerik:RadPane ID="RadPane_Top" runat="server">
                    <div id="scroller" style="height: 100%; width: 100%; -webkit-overflow-scrolling: touch; overflow-y: scroll;">
                        <iframe id="Iframe2" runat="server" src="ShowPDF.aspx" width="100%" height="100%" scrolling="yes"/>
                    </div>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar_PDFReview" runat="server" CollapseMode="Both" Height="25px" />
                <telerik:RadPane ID="RadPane_Bottom" runat="server">
                    <div id="Div1" style="height: 100%; width: 100%; -webkit-overflow-scrolling: touch; overflow-y: scroll;">
                        <iframe id="Iframe1" runat="server" src="PDFEdit.aspx" width="100%" height="100%" scrolling="auto"/>
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </body>
    </html>

  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 13 Aug 2012 Link to this post

    Hi Michael,

    After further investigation and testing regarding this case it seems that the provided workaround does not fix the issue in all cases. For example I stumbled on a case where the scrolling axises were swapped, i.e. horizontal scrolling scrolls the content vertically.

    However, this is issue is not directly related to the RadSplitter control but is a browser behavior and it out of our reach to handle it internally.

    All the best,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. ToltingColtAcres
    ToltingColtAcres avatar
    83 posts
    Member since:
    Nov 2010

    Posted 13 Aug 2012 Link to this post

    After many hours of frustrating trial and error modifications to the code, I Was able to get it working again. Below is what I ended up with. If I modify it in any way, one or both of the windows will refuse to 2 finger scroll. The top window displays a PDF file (streamed from the aspx page). The bottom pane contains a normal telerik-control-enabled aspx page.

    the scrolling problem exists not only in safari, but several other browsers (such as icabmobile) as well, so it is likely a problem with the underlying libraries.
    <telerik:RadSplitter ID="RadSplitter_PDFEdit" runat="server" SplitBarsSize="25px" LiveResize="true" Orientation="Horizontal" Height="100%" Width="100%">
     <telerik:RadPane ID="RadPane_Top" runat="server">
      <div id="scroller_top" style="height: 100%; width: 100%; overflow-y: scroll;">
       <iframe id="Iframe2" runat="server" src="ShowPDF.aspx" scrolling="yes" style="height: 100%; width: 100%; overflow: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch;" />
      </div>
     </telerik:RadPane>
     <telerik:RadSplitBar ID="RadSplitBar_PDFEdit" runat="server" CollapseMode="Both" Height="25px" />
     <telerik:RadPane ID="RadPane_Bottom" runat="server">
      <div id="scroller_bottom" style="height: 100%; width: 100%; -webkit-overflow-scrolling: touch; overflow-y: scroll;">
       <iframe id="Iframe1" runat="server" src="PDFEdit.aspx" scrolling="auto" height="100%" width="100%" />
      </div>
     </telerik:RadPane>
    </telerik:RadSplitter>

  10. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 16 Aug 2012 Link to this post

    Hi Michael,

    As discussed in this forum thread, the scrolling issues of <iframes> under iOS origins from the operating system itself rather than the browser. We are working on improvements of this functionality of RadControls, however,  I am not able to ensure that we will be able to overcome this problem.

    As I said in my previous reply, the CSS workaround does not cover all the cases, and we have not found any other solution so far. As soon as we come up with stable solution to this issue we will either implement it in the code or provide a sticky forum thread providing the workaround.

    Regards,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. ToltingColtAcres
    ToltingColtAcres avatar
    83 posts
    Member since:
    Nov 2010

    Posted 16 Aug 2012 Link to this post

    Sorry, I should have been clearer, I wasn't referring to the Telerik libraries when I used the term "libraries", I was referring to the rendering libraries used by safari and other browsers to paint pages.
  12. Erik Kleinreesink
    Erik Kleinreesink avatar
    10 posts
    Member since:
    Nov 2008

    Posted 28 Aug 2012 Link to this post

    Hello Dobromir,

    I know it's not a Telerik issue, but a mobile browsers one. And it's giving me a big headache.
    So I sure hope that you at Telerik find a workaround for it. It will be an extra plus for your controls if they are really compatible with all kinds of modern browsers.

    Thanks in advance,
    Erik Kleinreesink

  13. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 30 Aug 2012 Link to this post

    Hi Erik,

    Of course, as soon as we manage to find a stable workaround for this problem the code will be implemented n the controls' suite or if we find partial workaround (that is not applicable for all cases) we will post it as a sticky forum thread and / or a blog post.

    In addition, if you manage to find a workaround and are willing to share it we will reward you with 10000 Telerik points.

    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  14. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 11 Dec 2012 Link to this post

    Hi, I need to add the CSS that Misho provided in order to make my site work on a Ipad. The only problem is the overflow-y is adding unwanted scrollers when using the site on a PC browser. The question I have is how to apply CSS only on mobile devices?

    -webkit-overflow-scrolling: touch !important ;
    overflow-y: scroll !important/*<---------- I would like to know how to apply this line only on a mobile (ex: Ipad)*/



    UPDATE: I think I found out ...but ran into some other issues.

    1-When scrolling up/down in my content pane, the refreshing of the content seems really slow and you see often big squares (of the background color) that are only refreshed after a couple of seconds (sometimes, never...you need to tap in the area to make them visible). If I go directly on www.telerik.com (site I used in my code below) in Safari, I dont have that problem at all (I only experience it in a RadSplitter).

    2-Sometime the vertical scrolling needs to be done by tapping horizontally in the screen (swiping left/right to go down or up). This issue seems totally random and may also happen after flipping the device (from portrait to landscape or vice-versa).

    3-When scrolling down, the pane, by itself, seems to reload and position back to its very top. It doesnt "scroll", in fact the pane content just flash and we're back at the top. UPDATE: Ok I did more tests on this one and the issue is not when scrolling actually. The thing is I have multiple user controls (one under each other) on my page, that contains one RadGrid each. Some of these RadGrids have two-level hierarchy where the user can expand rows that contain child rows (either by using the small leftmost arrow or directly touching the row). The issue seems to be occuring when we expand these rows. The row ends to be expanded but the pane is thrown back to the top (we have to scroll back down). The weird things is the issue seem to disappear if either I change the order of the user controls on the page or If I remove some controls to reduce page content. I probably have to submit a sample for this one since it seems hard to reproduce without my code.

    4-This not seems more like a CSS setting, but the pane is horizontally scrollable (on maybe 10px), which we dont want.

    I experience these issues on two different iPad devices (iOS 5.1.1 (9B206)) using Q3 2012. Also, on all Windows browsers, there is no of these issues at all.


    Here's the simplest code I can use to reproduce it:

    .ContentPane
    {
        overflow:visible !important
        height:auto;
         
    }
     
    @media only screen and (max-device-width: 1024px)
    {
        .ContentPane
        {
             
            overflow:visible !important
            height:auto;
         
            -webkit-overflow-scrolling: touch !important ;
            overflow-y: scroll !important;
         
        }
    }

    <telerik:RadSplitter ID="Radsplitter1" runat="server" Height="100%" Width="100%" Orientation="Horizontal" >
     
     
                    <telerik:RadPane ID="RadPane1" runat="server" CssClass="ContentPane" ContentUrl="http://www.telerik.com">
                     </telerik:RadPane>
     
       </telerik:RadSplitter>

    UPDATE2: Ive enabled the Debug Console in Safari and have 3 times the same error:
    -Unsafe JavaScript attempt to access frame with URL "URL1" from frame with URL "URL2". Domains, protocols and ports must match.

    After some research, ive read that the error is normal if frames are using different domains. I tried switching the ContentUrl value to a local aspx file of my project and these error are no more, but same behavior of the page.

    UPDATE3:
    I also tested the code on an Android tablet and Android phone (native browser). On the tablet, I cant see any of the mentioned issue except #4. On the android phone, I can only see issue #1, but ALOT less worse than on the iPad.

    I also tried on a Iphone with IOS6 and all the issues seems gone.

    UPDATE4:
    Did more tests on iPhone (exact version is 6.0.1) and issue #3 also exists.

    Issue #3 description has been updated (see above)



    TIA

    Martin
  15. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 14 Dec 2012 Link to this post

    Hi Erik,

    In order to receive any consistence behavior of RadSplitter it must contains at least two RadPanes. Please, configure it with one more pane and see if the problem still occurs.

    Could you, also, just for the test, try to apply the same CSS styles to a standard IFRAME with external content?

    Regards,
    Vesi
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  16. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 14 Dec 2012 Link to this post

    Vesi,

    the following has still the issues. Also, the code im submitting are  trimmed down versions in order to reduce resolution complexity. My original RadSplitter, which has the issue, contains 6 RadPane in total.

    <telerik:RadSplitter ID="Radsplitter5" runat="server" Height="100%" Width="100%" Orientation="Horizontal" >
      
             <telerik:RadPane ID="RadPane5" runat="server" Height="150px" Collapsed="false">
                      </telerik:RadPane>
     
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false" CollapseMode="Forward" Visible="true" meta:resourcekey="labCollapseExpandLeft"></telerik:RadSplitBar>
     
                     <telerik:RadPane ID="RadPane2" runat="server" CssClass="ContentPane" ContentUrl="http://www.telerik.com">
                      </telerik:RadPane>
     
        </telerik:RadSplitter>

    Also, I do not experience the issues if I replace the RadSplitter by the following. Also I dont experience it neither even if I dont define any class attribute:

    <iframe class="ContentPane" src="http://www.telerik.com">
            <p>Your browser does not support iframes.</p>
    </iframe>

    TIA

    Martin
  17. Phil
    Phil avatar
    12 posts
    Member since:
    Jan 2011

    Posted 18 Dec 2012 Link to this post

    I also ran into the horizontal scroll issue.  My main page has splitter/pane which had ContentURL set as a design property.  I found that by removing the ContentURL property and then assigning from code behind during Page_Load solved my problem with iPad H-scroll.  At least for now.

    I also found that version 2012.3.1218.40 corrected RadMenu item clicks not working on iPad.

    Updated, testing on a real iPad still no H-Scroll, but IoS 5.0 Simulator is OK.
  18. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 20 Dec 2012 Link to this post

    Phil, when you're saying "horizontal scroll issue" are you talking about issue #2 or #4 (from my list)? And when you're saying "no H-Scroll" on real iPad, you mean the issue is gone? Please excuse my misunderstandings.

    BTW, I updated and added more details regarding issue #3 in my original post.

    Martin
  19. Phil
    Phil avatar
    12 posts
    Member since:
    Jan 2011

    Posted 20 Dec 2012 Link to this post

    Martin,
    I was only able to see a horizonal scrolling of a grid in a RadPane in a splitter (only 1 radpane) for a short time.  The total page area exceeds the iPad display.  With IoS simulator (XCode) I was able to do a drag left with the mouse to get the screen to scroll to the left so the right side of the grid was visible. At the same time a real iPad would not do the same thing.  While tinkering with the code  I did something which caused whatever I did to get it to work to stop working. 

    I did not experience #2.  I did see #4 when attempting to apply some of the suggest CSS when browsing with IE.  There was a horizontal scroll bar and the overall width was a few pixels wider than the scroll area, as you saw.  When viewed with iPad simulator there was no horizontal scroll bar, and the screen would not move to the left.

    In the end I just made all the columns a few pixels smaller and reduced the overall gird width to fit comfortably in the iPad display aea.

    Due to work load we've decided to let iPad testing go to the back of the line.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017