RadPane will not expand on an iPad

2 posts, 0 answers
  1. Eric
    Eric avatar
    3 posts
    Member since:
    Feb 2014

    Posted 31 Dec 2014 Link to this post

    I've stripped down my project to the barest of minimums - you can open this with no code behind and find that the left sliding zone works properly however the second set does not. I've found that ( in this particular case ) commenting the <br / > s out - lets the sliding zone work again ? I am having the same issues in my full project and this does not correct the sliding pane issues there but does here - after stripping out all other code and controls.

    I'm testing using Chrome's emulator = iPAD simulation
    Note that when using a real iPAD it exhibits identical behavior - 

    Also noteable:   all of my radsliders are un-responsive as well in iPAD mode

    You'll also see I've tried both old and new Html and Doctype declarations - no differences found 

    Currently
    Using VS 2012 - target framework is 4.5
         Referencing Telerik v 2014.2.724.45  Web.Design / Web.Device.Detection / Web.UI / Web.UI.Skins

    A better understanding of these anomalies might help me discover why my real app will not perform on the iPAD.



    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchView.aspx.cs" Inherits="Views.SearchView" Async="true" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>




    <%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
    <%--<html xmlns="http://www.w3.org/1999/xhtml">--%>

    <!DOCTYPE html>
    <html>
        

    <head id="Head1" runat="server">
        <title></title>
    </head>


    <body class="bodystyle">

        <form id="form1" runat="server">
            
            
           
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnablePageMethods="True">
                
            </telerik:RadScriptManager>

                Set Chrome emulation mode to Apple iPad 3 / 4 then -- comment the 3 < br / >  out / uncomment to see the effects 
                
                <telerik:RadSplitter runat="server" ID="RadSplitter1" Height="100%" Width="100%" Orientation="Vertical">

                    <telerik:RadPane runat="Server" ID="radpane1" Width="10px" MinWidth="10" MaxWidth="300" Scrolling="None" CssClass="radpane1" ShowContentDuringLoad="False">

                        <telerik:RadSlidingZone ID="slidingzone1" runat="server" Width="25px" DockedPaneId="pane1" ClickToOpen="True" RenderMode="Classic">

                            <telerik:RadSlidingPane ID="pane1" Title="ABC Works fine" runat="server" Width="275" MinWidth="25" MaxWidth="275">

                                <asp:Panel runat="server" ID="panelAroundMenu">

                                </asp:Panel>

                            </telerik:RadSlidingPane>

                        </telerik:RadSlidingZone>

                    </telerik:RadPane>

                    <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
                    </telerik:RadSplitBar>
                    
                    <telerik:RadPane runat="Server" ID="radpane22">
                        
                        <div id="divBody" runat="server" class="divBody">

                            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

                                <telerik:RadPageView ID="rpvCreate" runat="server">

                                    <telerik:RadSplitter runat="server" ID="RadSplitter2" Orientation="Horizontal" >

                                        <telerik:RadPane runat="Server" ID="radpane11" Height="20px" MaxWidth="980" Scrolling="None" ShowContentDuringLoad="False">


                                            <telerik:RadSlidingZone ID="ListMetricsSlidingZone" runat="server" Width="25px"
                                                DockedPaneId="ListMetricsPane" RenderMode="Auto" ClickToOpen="True" SlideDirection="Bottom"
                                                BorderStyle="Dotted" BorderWidth="1px" BorderColor="Black">

                                                <telerik:RadSlidingPane ID="ListMetricsPane" Title="DEF" runat="server" Height="340">
                                                    
                                                    Cannot collapse in iPAD emulation UNTIL the three < br / > 's below are commented out

                                                </telerik:RadSlidingPane>

                                              
                                                  <telerik:RadSlidingPane ID="ListHistorySlidingPane1" Title="XYZ" Font-Size="X-Large" runat="server" Height="340">
                                                  
                                                        Cannot expand - in iPAD emulation UNTIL the three < br / > 's below are commented out

                                                </telerik:RadSlidingPane>


                                            </telerik:RadSlidingZone>

                                        </telerik:RadPane>




                                        <telerik:RadPane runat="Server" ID="radpane33" Scrolling="None" ShowContentDuringLoad="False">

                                            <table class="maintable">
                                                <tr>
                                                    <td style="vertical-align: top;">
                                                        <div id="divWrapper" runat="server">
                                                            <div id="dfssfddfsfdfd" runat="server" style="display: block">
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>

                                        </telerik:RadPane>

                                    </telerik:RadSplitter>

                                </telerik:RadPageView>
                                
                            </telerik:RadMultiPage>
                            
                            
                            <br />
                            <br />
                            <br />
                            

                        </div>
                    
                            <%--                     
                            <br />
                            <br />
                            <br />
                                fails here as well -- when uncommented
                            --%>

                    </telerik:RadPane>
                    
                </telerik:RadSplitter>
            
            

        </form>

    </body>


    </html>

  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 05 Jan 2015 Link to this post

    Hi Eric,

    I have just answered your support ticket on the subject - for convenience I am pasting my answer here as well:

    Thank you for the provided sample code - we managed to reproduce the problematic behavior and it turned out to be related with the touch-scroll extender used in the Splitter. Commenting/uncommenting the three <br/> elements respectively disables/enables the scrolling of radPane22 and ListMetricsSlidingZone, which seems to prevent the click event of all buttons in this area. I am will log this issue for a further investigation, as for the time being you can work around the situation by disabling the scrolling of all RadPanes, having a child Splitter (so only the Splitter's scrolling will be functioning). For example:

    <telerik:RadPane runat="Server" ID="radpane22" Scrolling="None">
        ...
    </telerik:RadPane >

    I hope this information will be helpful for you. You Telerik Points were also updated accordingly.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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