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

Issues when scrolling vertically in a view

3 Answers 217 Views
View
This is a migrated thread and some comments may be shown as answers.
Nicklas
Top achievements
Rank 1
Nicklas asked on 03 Sep 2013, 12:45 PM
Hi,

I'm experiencing a somewhat annoying problem when scrolling my views;

Quite regularly when I scroll, the view "locks up" and the entire view scrolls and shows the grey browser background. By this I mean the footer, the header and the view content. I've attached two images.

Here's my _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.default.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.flat.min.css")" rel="stylesheet"/>
     
    @*<script src="~/Scripts/jquery-1.8.2.min.js"></script>*@
    <script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>
</head>
<body>
    @(Html.Kendo().MobileLayout()
              .Name("frontlayout")
              .Header(obj =>
                      Html.Kendo().MobileNavBar()
                          .Content(navbar =>
                                   @<text>
                                        @navbar.ViewTitle("")
                                    </text>)
              )
              .Footer(obj =>
                      Html.Kendo().MobileTabStrip()
                          .Items(items =>
                              {
                                  items.Add().Icon("action").Text("Logout").Url("index", "logout");
                              })
              )
              )
 
    @(Html.Kendo().MobileLayout()
              .Name("layout")
              .Header(obj =>
                      Html.Kendo().MobileNavBar()
                          .Content(navbar =>
                                   @<text>
                                            @(Html.Kendo().MobileBackButton()
                                                        .Align(MobileButtonAlign.Left)
                                                        .HtmlAttributes(new { @class = "nav-button" })
                                                        .Url(Url.RouteUrl(new { controller = "home" }))
                                                        .Text("Back"))
                                        @navbar.ViewTitle("")
                                    </text>)
              )
              .Footer(obj =>
                      Html.Kendo().MobileTabStrip()
                          .Items(items =>
                              {
                                  items.Add().Icon("action").Text("Logout").Url("index", "logout");
                              })
              )
          )
     
    @(Html.Kendo().MobileApplication()
              .ServerNavigation(false)
              .Transition("fade")
              .HideAddressBar(true)
              .Skin("flat")
              )
    @RenderBody()
</body>
</html>
 
<!-- Style for custom status icon in list -->
<style>
    .statusicon {
        float: right;
        margin-right: 50px;
        margin-top: 5px;
        display: inline-block;
        border-width: 1px;
        border-radius: 35px;
        border-style: solid;
        border-color: black;
        width: 15px;
        height: 1em;
    }
 
    .sl-hidden {
        display: none;
        visibility: hidden;
    }
</style>
And here's my view:
@model Stimline.Xplorer.Mobile.Models.UnitDetailsModel
@Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
@Scripts.Render("~/signalr/hubs")
 
@Scripts.Render("~/Scripts/Stimline/connector.js")
 
@(Html.Kendo().MobileView()
        .Name("unit-list")
        .Layout("layout")
        .Title("Units")
        .Content(
            @<text>
                 <span class="sl-hidden" id="signalRconveyanceId">@Model.ViewUnitContract.ConveyanceId</span>
                 @ListViewHelper(this)
             </text>
           )
        )
 
@helper ListViewHelper(WebViewPage page)
{
    @(Html.Kendo().MobileListView().Name("unitlist").Style("inset").Type("group")
                    .Items(root =>
                        {
                            root.Add().Text("Unit Details").Items(items =>
                                {
                                    items.Add().Content(@<text>
                                                                     <label>
                                                                         Unit
                                                                         <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.Name" />
                                                                     </label>
                                                                 <li style="background-color: #@Model.StatusColor">
                                                                     <label>
                                                                         Status
                                                                         <input type="text"disabled="disabled" value="@Model.StatusMessage" style="color: ghostwhite;"/>
                                                                     </label>
                                                                 </li>
                                                         </text>);
                                });
                                 
                                root.Add().Text("Detail information").Items(items =>
                                {
                                    items.Add().Content(@<text>
                                                             <label>
                                                                       Depth (m)
                                                                       <input id ="signalRdepth" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth, 2)" />
                                                                   </label>
                                                             <li data-icon="recents">
                                                                 <label>
                                                                     Speed (m/min)
                                                                     <input id ="signalRspeed" type="text" disabled="disabled" style="color: black"  value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.Speed, 2)"/>
                                                                 </label>
                                                             </li>
                                                             <li data-icon="recents">
                                                                 <label>
                                                                     Diff Speed (m/min)
                                                                     <input id ="signalRdiffSpeed" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.DiffSpeed, 2)"/> <!-- DiffSpeed -->
                                                                 </label>
                                                             </li>
                                                             <li data-icon="recents">
                                                                 <label>
                                                                     Weight (kg)
                                                                     <input id ="signalRtension" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.Tension, 2)"/>
                                                                 </label>
                                                             </li>
                                                             <li data-icon="recents">
                                                                 <label>
                                                                     Diff Weight (kg)
                                                                     <input id ="signalRdiffTension" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.DiffTension, 2)"/> <!-- DiffTension -->
                                                                 </label>
                                                             </li>
                                                         </text>);
                                });
                                 
                                root.Add().Text("Run Overview").Items(items =>
                                    {
                                        items.Add().Content(@<text>
                                                                 <label>
                                                                           Name
                                                                           <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Name" />
                                                                       </label>
                                                                 <li data-icon="recents">
                                                                     <label>
                                                                         Start time
                                                                         <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.StartTime"/>
                                                                     </label>
                                                                 </li>
                                                                 <li data-icon="recents">
                                                                     <label>
                                                                         End time
                                                                         <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.EndTime"/>
                                                                     </label>
                                                                 </li>
                                                             </text>);
                                    });
                                     
                                    root.Add().Text("Project").Items(items =>
                                        {
                                            items.Add().Content(@<text>
                                                                     <label>
                                                                               Operation
                                                                               <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.Description"/>
                                                                           </label>
                                                                     <li>
                                                                         <label>
                                                                             Name
                                                                             <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.ProjectContract.Name"/>
                                                                         </label>
                                                                     </li>
                                                                 </text>);
                                    });
                                     
                                    root.Add().Text("Well").Items(items =>
                                        {
                                            items.Add().Content(@<text>
                                                                     <label>
                                                                               Name
                                                                               <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.WellContract.Name"/>
                                                                           </label>
                                                                     <li>
                                                                         <label>
                                                                             Location
                                                                             <input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.WellContract.Location"/>
                                                                         </label>
                                                                     </li>
                                                                 </text>);
                                    });
                        })
            )
}
Any idea what might be causing this?

Also, the "Back" button seems to be unstable. Sometimes it works, and sometimes nothing happens when I click it.

3 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 04 Sep 2013, 10:42 AM
Hello Nicklas,

Thank you very much for sharing your code and screenshots with us.

I can see that you are using some form in your application. Sometimes this can cause behaviour like the one you are explaining. I would suggest you to take a look at the nativeScrolling option, that helps with form issues on some platforms. Please follow this link to learn more about this:

http://docs.kendoui.com/api/mobile/view#configuration-useNativeScrolling


As for the issue with the back button - I guess that this is due to the small hit area of the button, and the touch device cannot position the click exactly on the button. What I would suggest is to make the hit area (the button) a little bit larger, so it can be easier for clicking.

I hope this information helps!

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nicklas
Top achievements
Rank 1
answered on 04 Sep 2013, 01:22 PM
Thanks for your reply!

Well, I'm not really sure if that's the issue with the backbutton. I've written another post explaining how the button behaves when setting .ServerNavigation to true. It seems to generate some weird url when navigating back and forth between links. (See my post here)

As far as the native scrolling goes, I figured this out back when I was using the javascript implementation of the app. I can't remember exactly what solved it, but it was not native scrolling :) Any other suggestions?
0
Kiril Nikolov
Telerik team
answered on 06 Sep 2013, 06:03 AM
Hello Nicklas,

I assume that you are using Ajax navigation in your Mobile application and the strange URL that you are getting is because you have not implemented it correctly. Please refer to the following link showing how to implement Ajax navigation in Kendo UI Mobile application.

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/mobileapplication/overview#ajax-navigation

Incorrect using of the Ajax navigation, can cause the Kendo UI widgets to not work - in your case the button.

As for scrolling - are you deploying your application using PhoneGap? Because if this is the case you might check the following stackoverflow topic:

http://stackoverflow.com/questions/6193016/how-to-prevent-app-running-in-phone-gap-from-scrolling-vertically
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
View
Asked by
Nicklas
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Nicklas
Top achievements
Rank 1
Share this question
or