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

Issues when scrolling vertically in a view

3 Answers 299 Views

View

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

Nicklas asked on 03 Sep 2013, 12:45 PM

photo1.jpg

photo2.jpg

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>

.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)"/> 

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

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

Accepted

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!

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!