This is a migrated thread and some comments may be shown as answers.

iPad scrolling

17 Answers 324 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

17 Answers, 1 is accepted

answered on 16 Jul 2012, 07:43 AM

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

answered on 25 Jul 2012, 07:26 PM

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>

answered on 30 Jul 2012, 04:02 PM

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

answered on 08 Aug 2012, 05:36 PM

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>

answered on 13 Aug 2012, 11:44 AM

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

answered on 13 Aug 2012, 03:54 PM

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>

answered on 16 Aug 2012, 01:52 PM

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

answered on 30 Aug 2012, 07:49 AM

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

answered on 11 Dec 2012, 08:51 PM

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

answered on 14 Dec 2012, 05:43 PM

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

answered on 20 Dec 2012, 03:05 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

iPad scrolling

17 Answers, 1 is accepted