Issues when scrolling vertically in a view

4 posts, 1 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 03 Sep 2013 Link to this post

    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.
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 04 Sep 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 04 Sep 2013 Link to this post

    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?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Sep 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready