Anyone know why my MobileModalView form appears for a split second on my page load? It's a stripped down version with no style, but it appears and then goes away. I modified the ModalMobileView demo to test the basics of the MobileModalView feature and included a form and some a few other small changes. Could the addition of a form cause this some how?
Here's my cshtml:
@{
Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@model MyProjectWeb.Models.LoginModel
@(Html.Kendo().MobileView()
.Name("modalview-camera")
.Title("MyProject")
.Content(
@<text>
<img src="@Url.Content("~/Content/photos/NewLogoTrimmed.JPG")" class="camera-image" style="width: 100%; height: 100%;" />
<br/>
<br />
<br />
<br />
<br />
<br />
@(Html.Kendo().MobileButton()
.Text("Login")
.Name("modalview-open-button")
.Rel(MobileButtonRel.ModalView)
.Url("#modalview-login")
)
</text>)
)
@(Html.Kendo().MobileModalView()
.Name("modalview-login")
.HtmlAttributes(new { style = "width: 95%; height: 18em;" })
.Header(obj =>
Html.Kendo().MobileNavBar()
.Content(navbar =>
@<text>
<span>Login</span>
@(Html.Kendo().MobileButton()
.Text("Cancel")
.Align(MobileButtonAlign.Right)
.Events(events => events.Click("closeModalViewLogin"))
)
</text>)
)
.Content(
@<text>
@ModalViewContentTemplate()
</text>)
)
@helper ModalViewContentTemplate()
{
using (Html.BeginForm("LogOn", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) {
@(Html.Kendo().MobileListView().Style("inset")
.Items(items =>
{
items.Add().Content(
@<text>
@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
</text>);
items.Add().Content(
@<text>
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
</text>);
items.Add().Content(
@<text>
<input class="k-checkbox" data-val="true" data-val-required="The Remember Me field is required." id="IsPersistent" name="IsPersistent" type="checkbox" value="true">
<label class="k-checkbox-label" for="IsPersistent">Remember Me</label>
<input name="IsPersistent" type="hidden" value="false">
</text>);
})
)
@(Html.Kendo().MobileButton()
.Text("Login")
.Name("modalview-login-button")
.Events(events => events.Click("closeModalViewLogin"))
)
@*@(Html.Kendo().MobileButton()
.Text("Register")
.Name("modalview-reg-button")
.Events(events => events.Click("closeModalViewLogin"))
)*@
}
}
<style>
#modalview-login-button,
#modalview-reg-button,
#modalview-open-button {
display: block;
text-align: center;
margin: .6em .8em 0;
font-size: 1.2em;
}
#modalview-open-button {
margin: 0 3em;
padding: .5em;
}
.km-flat #modalview-open-button {
color: #fff;
}
#modalview-camera {
text-align: center;
}
#modalview-camera img {
display: block;
margin: 30px auto;
}
#modalview-camera .km-content,
.km-ios #modalview-login .km-content {
/*background: url(../../content/shared/images/patterns/pattern1.png) repeat 0 0;*/
}
.km-ios #modalview-camera .km-button,
.km-ios #modalview-login .km-button,
.km-ios #modalview-camera .km-navbar,
.km-ios #modalview-login .km-header {
background-color: #000;
}
.km-ios #modalview-camera .km-button:active,
.km-ios #modalview-camera .km-state-active,
.km-ios #modalview-login .km-button:active,
.km-ios #modalview-login .km-state-active {
background-color: #2e2e2e;
}
.km-ios #modalview-login #modalview-login-button,
.km-flat #modalview-login #modalview-login-button {
background-color: Green;
color: #fff;
}
.km-tablet .km-ios #modalview-camera .km-view-title, .km-tablet .km-ios #modalview-login .km-view-title {
color: #fff;
text-shadow: 0 -1px rgba(0,0,0,.5);
}
</style>
<script>
function closeModalViewLogin() {
$("#modalview-login").kendoMobileModalView("close");
}
</script>
The _LayoutMobile is here:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="~/Content/kendo/2015.2.805/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2015.2.805/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2015.2.805/kendo.default.min.css" rel="stylesheet" />
@*<link href="~/Content/kendo/2015.2.805/kendo.mobile.ios.min.css" rel="stylesheet" />*@
@*<link href="~/Content/kendo/2015.2.805/kendo.mobile.android.light.min.css" rel="stylesheet" />*@
@*<link href="~/Content/kendo/2015.2.805/kendo.mobile.flat.min.css" rel="stylesheet" />*@
@*<link href="~/Content/kendo/2015.2.805/kendo.mobile.ios.min.css" rel="stylesheet" />*@
<script src="~/Scripts/kendo/2015.2.805/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.aspnetmvc.min.js")"></script>
<script type="text/javascript" src="@Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("http://ajax.aspnetcdn.com/ajax/mvc/5.1/jquery.validate.unobtrusive.min.js")"></script>
@*<script src="~/Scripts/jquery.timeago.js" type="text/javascript"></script>*@
<script src="~/Scripts/moment-with-locales.js" type="text/javascript"></script>
@*<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2015.2.805/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@
@RenderSection("HeadContent", false)
@*using the bundles instead*@
@*@Styles.Render("~/Content/test.css")*@
@*@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")*@
@(Html.Kendo().MobileApplication()
//.PushState(true)
.ServerNavigation(true)
//.Root("/mobile/")
//.StatusBarStyle("black")
)
</head>
<body>
@RenderBody()
</body>
</html>