Modal view form flashes online before user opens modal view

3 posts, 0 answers
  1. Gregory
    Gregory avatar
    14 posts
    Member since:
    Feb 2014

    Posted 19 Jan Link to this post

    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. Gregory
    Gregory avatar
    14 posts
    Member since:
    Feb 2014

    Posted 20 Jan Link to this post

    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.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 21 Jan Link to this post

    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
Back to Top