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 

    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>

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

    <body class="bodystyle">

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

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





                    <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
                    <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 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:RadPane runat="Server" ID="radpane33" Scrolling="None" ShowContentDuringLoad="False">

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



                            <br />
                            <br />
                            <br />

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





  2. Vessy
    Vessy avatar
    1870 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.


    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.

Back to Top