iPad/iPhone Support

[Eugenio]

I tried the RadWindow on the iPad (mobile Safari) and it doesn't move or scroll. Is there a workaround or a possible update for this?

[Fiko]

Hello Vincent,

We are aware of such kind of issues in IPad or IPhone's browsers. We are currently working on improving the behavior of all RadControls for ASP.NET AJAX and the upcoming Q3 2010 release of the controls will have a better support for these devices.

Best wishes,
Fiko
the Telerik team

[Travis Johnson]

Did this support make it into the Q3 release? I am on 2010.3.1317 and the radwindow still wont move or scroll. I have a large image inside a fixed size radwindow and the image just displays full size.

Thanks

Trav

[Georgi Tunev]

Hi Travis,

We are currently working on some fixes related to the mobile browser support (including iPads) and they will be present in Q1 2011.


Regards,
Georgi Tunev
the Telerik team

[GlenB]

Can you please also look at fixing the iPad issue when a radwindow is opened from within another radwindow - everything slows down beyond being useful. I did have a workaround for this by opening the 2nd radwindow in an iframe, but the Q3 2010 release undid the fix (I suspect it is because of the scrolling fix) so it is now not working again. Thanks.

[Tsvetie]

Hi GlenB,
Unfortunately, we were not able to include the fix for the problem you have for the official Q1 2011 release, but we will do our best to improve the behavior of RadGrid in the described scenario for Q1 2011 SP1.

All the best,
Tsvetie
the Telerik team

[Ian]

How is this support truly going?  Based on the solution I had to use recently (using objects in a div) that the solution is more complicated that it may appear.

[Georgi Tunev]

Hi Glen,

In general - yes, the solutions for some of the problems are far from easy ones, but we do our best :)
If you have encountered any specific problem that was not fixed in Q1 2011, please let us know, so we can examine it on our side.


Best wishes,
Georgi Tunev
the Telerik team

[Big Lou]

Has there been an update to this?  We are currently using Q2 2011 and we are able to move a RadWindow on the iPad, but cannot scroll within the window.  The iPad two-finger scroll method does not seem to work within a RadWindow - instead it scrolls the entire container page.

Thanks!

[Marin Bratanov]

Hello Michael,

We are doing our best to improve the mobile browser support (recently there have been fixes on the predefined dialogs under the mobile Safari for example), yet not everything is possible, since mobile browsers and devices do not use the same standard sets of events ASP expects. Especially under multi-touch screens the way some events are fired is quite difficult to handle with code that does not belong to the manufacturer. Currently the RadWindow's content can be scrolled by dragging its own scrollbar, the way scrollbars are supposed to work.

  I have logged your request in our database for researching, yet I cannot provide an estimate when or even if this functionality will be available, as there are many other tasks with high priority and it may turn out that this scrolling method is attached to the main page in the mobile browser internally.


Best wishes,
Marin
the Telerik team

[Fernando]

Hi 
i have the same problem with my RadWindows in my ipad. i need you fix it this as soon as possible
i have RadControls for ASP.NET AJAX Q1 2011
thk

[Marin Bratanov]

Hi guys,

As I stated in my previous post this issue is in our research list, yet it already seems that this is more of an issue between the mobile iOS and iframes than an issue with the RadWindow. Please try putting your page in a regular iframe instead of the RadWindow and see if you can scroll it as expected. If not - then indeed this limitation does not come from our controls.

I am currently inclined to believe that this is not possible, as other forums are also full with similar issues, for example:
http://stackoverflow.com/questions/4599153/iframes-and-the-safari-on-the-ipad-how-can-the-user-scroll-the-content
http://www.lemon8.nl/ipads-and-iframe-scrolling/
or the general google search that will lead to the same results:
http://www.google.com/search?&q=two+finger+scroll+iframe

It looks like in newer versions of the iOS this feature is no longer supported by Apple themselves. Nevertheless if we find a viable solution to the matter it will be incorporated in our code.

Greetings,
Marin
the Telerik team

[Brian]

Hi ,
Any update on being able to scroll RadWindow on an Ipad?  This simple but powerful control seems to be slipping back in the bid to make other controls mobile/touch friendly. 

[Marin Bratanov]

Hi Brian,

The problem is between iframes and iOS and is not something we can resolve. We have taken care of some other bugs iOS 5 introduced with iframes with our Q1 2012 release, yet scrolling in iframes is still something Apple refuse to give their customers.

There is some good news about this, however, in iOS 5 they have added the -webkit-overflow-scrolling:touch; CSS property which can be added to an element to allow it to be scrolled. You can try wrapping your page's content in a div with certain dimensions (e.g. about the expected size of the RadWindow, or 100% so that it resizes with its parents) and set this property to it to allow scrolling inside the div so that you do not have to scroll the iframe (note you may also need overflow-y: scroll or something similar to force scrollbars). You can also search the net for options on working around this iOS/browser bug with these CSS properties.


Kind regards,
Marin
the Telerik team

[GlenB]

The use of the CSS workaround is good (thanks) - I can now scroll correctly on the iPad, however to enable scrolling in a RadGrid using this fix I have to turn off the RadGrid's AllowScrolling feature. This means I can't use Static Headers when scrolling the grid (the entire grid has to scroll - pagers and all) - any ideas on how I can resolve this? Thanks.

[Marin Bratanov]

Hi Glen,

 There have recently been some improvements in this mechanism and we are also working on improving it further for the Q2 2012 release. It is not an easy task to get around the numerous bugs the native Safari for iOS has with scrolling, so my best suggestion is to either use the setup that satisfies most of your customer base (i.e. either sacrifice scrolling for iPad users, or static headers for all). I also suggest that you upgrade to the latest version (currently Q1 2012) and again to the Q2 2012 release when it is out.


Greetings,
Marin
the Telerik team

[Chris Trina]

It appears that with the recent 2012 Q2 release, the display of the editor on the iPad has improved, but there is still work to be done. In the past, a control with a height smaller than 150px displayed text overlayed over other controls.  This appears to be fixed. The issue remains that longer content in an editor frame cannot be scrolled when in "design" mode. This seems odd because when viewing the content in "html" mode in the editor, the content appears to allow scrolling properly.

As a workaround, I tried to use the "full screen" option in the toolbar to display a larger amount of content. The result is that the editor frame is made larger but does not take up the entire display (remaining inline in the page). Are these issues being worked on since iPad usage of your control suite appears to be growing? If not, are there recommended workarounds that could help either of these issues?

[Marin Bratanov]

Hello Chris,

I would like to begin by asking that you post questions for each control in the relevant section so that all the information can be discoverable later by people looking for this control. In this case it would be best if you post your query in the RadEditor forum.

The scrolling problem you describe stems from the iOS limitation that I commented on in my previous posts: http://www.telerik.com/community/forums/aspnet-ajax/window/ipad-iphone-support.aspx#1789009 - you simply cannot scroll iframes and this is what the RadEditor uses by default in design mode. We have fixed yet another bug that stems from iOS vs iframes (the size overflow), yet this will indeed hide larger content under this OS. I realize this can be problematic, yet the only thing that can be done in this case is to set ContentAreaMode to Div so that the RadEditor does not use an iframe, but a div. Note that this mode has its own set of limitations, e.g. a large image would again appear outside of the contentArea as it would stretch the div as it does not provide an isolated context.

Kind regards,
Marin Bratanov
the Telerik team

[Himanshu]

Hi,
I am looking for scroll bar in Ipad telelerik window popup.
My best approach would be something like  -webkit-overflow-scrolling: touch (ie propery:value ) in telerik.window.create
as this CSS property is giving me scroll bar every where else across the application.

var windowElement = $.telerik.window.create({
        title: title,
        html: "<div id = 'PopUp' class='PopUp'><img id='LoaderImg' src='loader.gif' alt='Loading' /></div>",
        modal: true,
        resizable: true,
        draggable: true,
        scrollable: true,    
        height: 40,
        width: 50,
        //  -webkit-overflow-scrolling: touch,
        onClose: function (event) {
            if (!confirmNavigation(event)) {
                return false;
            }

            $(this).empty();
            $(this).remove();
        }
    });

var win = windowElement.data('tWindow');

win.ajaxRequest(url);

    win.center();
    win.open();

[JF]

We are using v2012.2.815.40 but still encountered the RadWindow scrollbar issue. Is this solve with IOS 6? 

[Marin Bratanov]

Hi,

It seems that iOS6 still does not support scrolling in iframes, so this is not something we can fix.


Regards,
Marin Bratanov
the Telerik team

[Rémy]

Hi,

I have trouble with positioning a RadWindow on iPad. I have a long page full of item (my page can be 2500px of height) and I want to open the windows at the same place of the page that where the selectioned item is (exemple, if the item is at the end of the list of item, I want the window at that place, not in the middle of the place. If the item is at the beginning, I want the window position at the top of the list).

My RadWindow declaration is:

<telerik:RadWindow runat="server" ID="winHistorique" NavigateUrl="Historique.aspx"
    InitialBehaviors="Maximize" RestrictionZoneID="NavigateUrlZone" VisibleStatusbar="false" Title="Historique"
    Height="620px" Width="742px" ShowContentDuringLoad="False" AutoSizeBehaviors="Width, Height"
    IconUrl="Images/historique.gif">
</telerik:RadWindow>

I've also try with a RadWindowManager

<telerik:RadWindowManager runat="server" ID="winHisto" ShowContentDuringLoad="false"

    AutoSize="false" EnableShadow="true" Title="Historique" Width="800px" Height="620px"

    IconUrl="Images/historique.gif" VisibleStatusbar="false">

</telerik:RadWindowManager>

Do you have a solution for this?

Thank you

Visual studio 2008 .NET 3.5 SP1
Windows 7
Trouble with iOS browser (I can't test on a Android device, so I can't say if it's for every touch screen device)
Telerik ASP.NET AJAX 2012.1.301.2 
VB.NET

[Marin Bratanov]

Hi Rémy,

This is not functionality offered by the control out of the box and is not directly related to the iPad/iPhone. You can use its Client-side API (the moveTo() method) to position it as desired on the screen. Note that a restriction zone may break this functionality. On getting the desired position - you can try using jQuery or the Telerik static client library (the getBounds() method).

If you need a context-sensitive control you can use the RadToolTip and its load-on-demand capabilities: http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx. Note that touch devices do not have a mouseover event so you would need to covfigure it to show OnClick.


Greetings,
Marin Bratanov
the Telerik team

[JF]

Hi,

We tried to look into the html tags generated by RadWindow and we found out that we can actually scroll the iframe using iPad! We copied the CSS class and wrapped the iframe with a Div, then set style="overflow: scroll;-webkit-overflow-scrolling: touch !important;" at the Div. Everything works as expected but it does not work with the original RadWindow. I believe the embedded javascript has caused the scrolling function to fail. What is more disappointing is that we also found out that another web control provider does provide controls that support scrolling with iframe. Please look into it and give us a solution instead of waiting for IOS to solve it! Thanks.


<div id="RadWindowWrapper_RadWindow2" class="RadWindow RadWindow_Windows7 rwNormalWindow rwTransparentWindow" style="width: 400px; height: 400px; position: absolute; visibility: visible; z-index: 3003; " unselectable="on">
            <table cellspacing="0" cellpadding="0" class="rwTable" style="height: 400px; ">
                <tbody>
                    <tr class="rwTitleRow"><td class="rwCorner rwTopLeft" style="cursor: nw-resize; ">&nbsp;</td><td class="rwTitlebar" style="cursor: move; "><div class="rwTopResize" style="cursor: n-resize; "><!-- / --></div><table align="left" cellspacing="0" cellpadding="0" class="rwTitlebarControls" style=""><tbody><tr><td style="width: 16px; "><a class="rwIcon"></a></td><td><em unselectable="on" style="width: 197px; ">&nbsp;</em></td><td nowrap="" style="white-space: nowrap; "><ul class="rwControlButtons" style="width: 155px; "><li><a href="javascript:void(0);" class="rwPinButton" title="Pin on"><span>Pin on</span></a></li><li><a href="javascript:void(0);" class="rwReloadButton" title="Reload"><span>Reload</span></a></li><li><a href="javascript:void(0);" class="rwMinimizeButton" title="Minimize"><span>Minimize</span></a></li><li><a href="javascript:void(0);" class="rwMaximizeButton" title="Maximize"><span>Maximize</span></a></li><li><a href="javascript:void(0);" class="rwCloseButton" title="Close"><span>Close</span></a></li></ul></td></tr></tbody></table></td><td class="rwCorner rwTopRight" style="cursor: ne-resize; ">&nbsp;</td></tr>
                    <tr class="rwContentRow">
                        <td class="rwCorner rwBodyLeft" style="cursor: w-resize; ">&nbsp;</td>
                        <td class="rwWindowContent rwExternalContent" valign="top">
                            <div style=" background-color: Blue; height: 400px;width:400px; overflow: scroll;-webkit-overflow-scrolling: touch !important;">
                                <iframe id="myIframeId" title="" src="/Telerik/Report.aspx" scrolling="auto" frameborder="0" style="height: 100%; width: 100%;">
               </iframe>
                            </div>
                            <div style="position: absolute; z-index: 1; top: 31px; left: 8px; background-color: white; opacity: 0; width: 400px; height: 400px; display: none; "></div>
                        </td>
                    </tr>
                    <tr class="rwStatusbarRow" style=""><td class="rwCorner rwBodyLeft" style="cursor: w-resize; ">&nbsp;</td><td class="rwStatusbar"><table align="left" cellspacing="0" cellpadding="0" style="width: 100%; "><tbody><tr><td style="width: 100%; "><input id="RadWindow1_status" readonly="" unselectable="on" class=""><label for="RadWindow1_status" style="display: none; ">status label</label></td><td style="width: 15px; "><div style="cursor: se-resize; "></div></td></tr></tbody></table></td><td class="rwCorner rwBodyRight" style="cursor: e-resize; ">&nbsp;</td></tr>
                    <tr class="rwFooterRow"><td class="rwCorner rwFooterLeft" style="cursor: sw-resize; ">&nbsp;</td><td class="rwFooterCenter" style="cursor: s-resize; ">&nbsp;</td><td class="rwCorner rwFooterRight" style="cursor: se-resize; ">&nbsp;</td></tr>
                </tbody>
            </table>
        </div>

[Marin Bratanov]

Hi,

I have just replied your support ticket on the same matter. I am pasting the information here as well:

This idea is already logged in our database for research and I have created a PITS item where you can monitor it. You can find it in this URL. One problem is that the -webkit-overflow-scrolling property is not available in older versions of iOS and thus such a fix cannot be universal.


Regards,
Marin Bratanov
the Telerik team