We are using a RadListBox on a mobile phone site - test url is http://photo.lenos.us
We want the list of contacts to scroll. If you access this on a mobile andriod phone w/ Chrome it will scroll very 'rough' only in small increments. BUT - if on Chrome, you click on the menu item REQUEST DESKTOP SITE - it will reload the page and the listbox scrolling will be perfect, smooth and graceful
Code is attached.
I would expect the smooth scroll / flick-scroll effect when it is loaded as a mobile site.
Any help would be appreciated.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!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">
<head runat="server">
<style type="text/css">
html, body{
margin: 0px;
height: 98vh;
min-height: 98vh;
}
</style>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadSkinManager Runat="server" Skin="Bootstrap"></telerik:RadSkinManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager>
<div style="width: 100%;">
<div style="width: 100%; height: 100%;" >
<telerik:RadNavigation runat="server" ID="Nav1">
<Nodes>
<telerik:NavigationNode Text="Pep Locations" BackColor="Yellow">
<Nodes>
<telerik:NavigationNode Text="Cincinnati"></telerik:NavigationNode>
<telerik:NavigationNode Text="Panama"></telerik:NavigationNode>
<telerik:NavigationNode Text="Chicago"></telerik:NavigationNode>
<telerik:NavigationNode Text="Pittsburg"></telerik:NavigationNode>
<telerik:NavigationNode Text="Boston"></telerik:NavigationNode>
<telerik:NavigationNode Text="Skillman"></telerik:NavigationNode>
</Nodes>
</telerik:NavigationNode>
<telerik:NavigationNode Text="Pep Clients">
<Nodes>
<telerik:NavigationNode Text="Kraft"></telerik:NavigationNode>
<telerik:NavigationNode Text="P&G"></telerik:NavigationNode>
<telerik:NavigationNode Text="Georgia Pacific"></telerik:NavigationNode>
<telerik:NavigationNode Text="Heinz"></telerik:NavigationNode>
<telerik:NavigationNode Text="Johnson & Johnson"></telerik:NavigationNode>
<telerik:NavigationNode Text="Wells Fargo"></telerik:NavigationNode>
</Nodes>
</telerik:NavigationNode>
</Nodes>
</telerik:RadNavigation>
</div>
<div style="width: 100%; height: 94vh;" >
<telerik:RadListBox runat="server" ID="RadListBoxSource" Height="100%" Width="100%" RenderMode="mobile" style="">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/bell.jpg" style="border-radius:90px" height="75px" Width="75px" />
<asp:label runat="server" Text="Bell,Steph" /><br />
<a href="tel:847-555-5555">847-555-5555</a>
</ItemTemplate>
<Items>
<telerik:RadListBoxItem> </telerik:RadListBoxItem >
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
</Items>
</telerik:RadListBox>
</div>
</div>
</form>
</body>
</html>
1 Answer, 1 is accepted
In this scenario, it appears that the issue is related to the TouchScrollExtender widget, which is used in mobile browsers. You may disable the widget with the following snippet:
<script type="text/javascript"> Telerik.Web.UI.TouchScrollExtender.prototype.initialize = function () { };</script>Thus, you will use the native mobile browser scroll behavior.
Regards,
Dimitar
Telerik