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

Initially hidden window causes flickering

1 Answer 951 Views

Window

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

Brian asked on 31 May 2019, 03:54 PM

I have a window in my _Layout.cshtml which I have initially set to visible="false". When I load or refresh the main page, I get a flickering, such that you can momentarily see the window text and button. I'm using a tag helper if that makes any difference.

The following is the _Layout.cshml file. The rest of the solution is just the standard Telerik ASP.Net Core template using ASP.Net Core 2019.2.514 controls on .Net Core 2.2.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - WindowFlickerTest</title>

<link href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development">

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

</environment>

<environment names="Staging,Production">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

</environment>

</head>

<body class="k-content">

<kendo-window name="windowChangeUser"

title="Change User"

draggable="true"

resizable="false"

width="250"

height="200"

modal="true"

visible="false"

>

<content>

<div style="font-size: 13px; padding-top: 20px;">

<p>

Enter a username to switch to

</p>

<p style="padding-top: 20px;">

<input type="text" class="k-textbox" id="userName" />

</p>

</div>

<div style="padding-top: 20px; text-align: center">

<kendo-button name="buttonChangeUserOk"

type="submit"

on-click="windowClose"

>

<content>OK</content>

</kendo-button>

</div>

</content>

</kendo-window>

<nav class="navbar navbar-inverse navbar-fixed-top p-3">

<div class="container p-0 p-sm-3">

<kendo-button id="buttonOpenWindow" on-click="openWindow">

<content>Show me the window!</content>

</kendo-button>

<div class="navbar-header">

<kendo-button name="configure" tag="button" icon="menu" class="k-rpanel-toggle k-primary btn-toggle"></kendo-button>

<a asp-controller="Home" asp-action="Index" class="navbar-brand">Your .NET Core Application</a>

</div>

<div id="responsive-panel" class="navbar-left">

<kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">

@(Html.Kendo().Menu()

.Name("Menu")

.Items(items =>

{

items.Add().Text("Home").Action("Index", "Home", new { area = "" });

items.Add().Text("About").Action("About", "Home", new { area = "" });

items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });

})

)

</kendo-responsivepanel>

</div>

</nav>

<main>

<div class="container">

@RenderBody()

</div>

</main>

<footer class="footer text-center d-flex align-items-center">

<div class="container pb-0">

<hr />

<p class="text-muted">

Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.

</p>

</div>

</footer>

<environment names="Development">

<script src="~/lib/bootstrap/js/bootstrap.js"></script>

</environment>

<environment names="Staging,Production">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"

asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"></script>

</environment>

@RenderSection("scripts", required: false)

</body>

</html>

<script type="text/javascript">

function openWindow() {

var window = $("#windowChangeUser").data("kendoWindow");

window.center();

window.open();

}

function windowClose() {

var window = $("#windowChangeUser").data("kendoWindow");

window.close();

}

</script>

1 Answer, 1 is accepted

Accepted

answered on 05 Jun 2019, 04:29 PM

Hello Daniel,

This behavior is known as Flash of unstyled content. It has been discussed in the forums before, see Alexander's post in the linked thread for more details.

Following the suggesting for hiding the respective elements on load and showing them at a later point you can:

1. Wrap the Window's content in a div element that has a custom class or an id that can be used as a selector, for example:

<content>

<div style="font-size: 13px; padding-top: 20px;" class="contentWrapper">

//... content...

</div>

</content>

2. Make that div invisible initially:

<style>

.contentWrapper {

visibility: hidden;

}

</style>

3. Handle the Window's open event and make the content visible when the Window opens:

function onOpen() {

$(".contentWrapper").css("visibility", "visible");

}

Give this approach a try and let us know whether it successfully works around the issue.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.