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

Resize IFrame window based on size of parent

4 Answers 2595 Views

Window

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

Laurie asked on 05 Dec 2018, 04:39 PM

Hi! I'm using IFrame windows for modal forms and want to be able to resize the modal window dynamically, based on the size of the calling parent.

Here is the calling parent:

@page

@addTagHelper "*, Kendo.Mvc"

@model MySite.Test.CustomerModel

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Customer</title>

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

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

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

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

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

</head>

<body>

@{

string[] actions = new string[] { "Close" };

}

<kendo-window name="addEditCustomer"

modal="true"

title="Add a New Customer"

draggable="true"

iframe="true"

resizable="true"

on-close="onClose"

style="display:none"

actions="actions">

<content>

loading user info...

</content>

<popup-animation enabled="true" />

</kendo-window>

<a href="javascript:void(0);" onclick="openWindow(5)" class="btn btn-sm btn-outline-primary right">Click here to open the window.</a>

<div class="responsive-message"></div>

<script>

function onClose() {

//alert("closed");

}

function openWindow(id) {

var url = "/test/testaddcustomer?id=" + id;

$("#addEditCustomer").data("kendoWindow").refresh({ url: url }).title("Edit Customer");

$("#addEditCustomer").data("kendoWindow").open();

$("#addEditCustomer").data("kendoWindow").center();

}

</script>

</body>

</html>

And here is the window page:

@page

@model MySite.Test.AddCustomerModel

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

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

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

<link href="~/lib/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet" />

<script src="~/js/site.js" asp-append-version="true"></script>

<script src="~/js/bundle.js"></script>

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

</head>

<body>

<div>

<br />

<h2>TestAddCustomer</h2>

<p> This would be a form to add the customer.</p>

</div>

</body>

</html>

<script>

$(document).ready(function () {

//var showWidth = $(window).parent.width()*.8;

//var showHeight = $(window).parent.height() * .8;

var showWidth = 400;

var showHeight = 400;

window.parent.$("#addEditCustomer").data("kendoWindow").setOptions({ width: showWidth, height: showHeight });

window.parent.$("#addEditCustomer").data("kendoWindow").center();

});

</script>

I am able to get the width and height to set to static values (400x400) and recenter, but I'd like to get the height dynamically, as in the commented lines.

Any help would be much appreciated!

4 Answers, 1 is accepted

answered on 05 Dec 2018, 07:42 PM

testaddcustomer.png

I updated my code, changing the script in my window page to read:

$(document).ready(function () {

//var showWidth = $(window).parent.width()*.8;

//var showHeight = $(window).parent.height() * .8;

var showWidth = "80%";

var showHeight = "80%";

window.parent.$("#addEditCustomer").data("kendoWindow").setOptions({ width: showWidth, height: showHeight });

window.parent.$("#addEditCustomer").data("kendoWindow").center();

});

The width showed up as 80% but the height extended beyond the height of the parent window, as you will be able to see in the attached png file. Also, my code does call center() but I'm not sure how to call resize(), which seems to be an event rather than a method. Please advise.

Thanks!

Laurie

answered on 06 Dec 2018, 06:15 PM

Hello Laurie,

On the height - the width and height options you set propagate as CSS rules on the popup element, and so they are calculated by the browser based on their parent element (by default - the body). So, if the <body> in your case is very tall, the kendo window is likely to be quite tall too. A rather easy solution is to make the top-level elements fit the viewport, something like:

html, body {

height: 100%;

margin: 0;

padding: 0;

}

Ultimately, you need to check what the parent element is and what is its height in order to adjust it so it allows the desired percentage calculations. You can inspect the rendered HTML with the browser dev toolbar to see exactly what's going on and what dimensions come from where.

It is also important to note that the header (titlebar) of the window adds some height and so you may want to reduce the height option to, for example, 80% or 70%. Also, if you simply .maximize() it when showing, you will have fewer dimensions to take care of and you will not have to re-center in any case.

On handing resize - something like this is the easiest approach:

$(window).resize(function () {

$("#windowDetails").data("kendoWindow").center();

});

where you can extend this to a named function and, for example, attach it only when you show the dialog and detach it when it is closed. Or, you can check if the popup element is visible before centering. The goal being to reduce the calls and calculations.

On the scroll change - this is likely to happen because the content page has default focus on an input upon loading. The Kendo Window renders its popup as the last child in the <body> and it is absolutely positioned. When an input is focused the browser often tries to bring it into view and so it attempts to scroll to where the markup declaration is. Absolutely positioned elements often confuse such logic and the most common solutions to this behavior are:

set the focus with some timeout. A couple of hundred of milliseconds are unlikely to break the user experience but they are likely to let the browser realize that the input is actually visible
set focus to the content only after the dialog is shown (perhaps in the refresh event)
store the current scroll when the function (anchor click) happens and restore it when the dialog closes

What will work for you requires an empirical test because over the years I have not found a reliable way to tell exactly when the browser gets confused.

Regards,
Marin Bratanov
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.