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

ListBox on Mobile Phone

1 Answer 92 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 25 Nov 2015, 05:05 PM

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

Sort by
0
Dimitar
Telerik team
answered on 26 Nov 2015, 03:27 PM
Hello,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
ListBox
Asked by
Michael
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or