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

Modal view form flashes online before user opens modal view

2 Answers 82 Views
ModalView
This is a migrated thread and some comments may be shown as answers.
Gregory
Top achievements
Rank 1
Gregory asked on 20 Jan 2016, 12:02 AM

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>

2 Answers, 1 is accepted

Sort by
0
Gregory
Top achievements
Rank 1
answered on 20 Jan 2016, 05:22 PM

Here's a demo: http://runner.telerik.io/fullscreen/ICoqi

If you refresh the page a few times and watch closely you will see the generic html form appear at the bottom for a split second.

0
Petyo
Telerik team
answered on 21 Jan 2016, 04:21 PM
Hi,

the behavior you refer to is commonly known as FOUC. There are many means to avoid it, but it is not specific to the kendo mobile application, so you may pick the one you find most suitable. 

Regards,
Petyo
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
ModalView
Asked by
Gregory
Top achievements
Rank 1
Answers by
Gregory
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or