Kendo window size issue in IE11 / Edge

Question

I have a Kendo window that I populate with an MVC partial view. When I set the size to "auto", it renders correctly in Chrome, but looks terrible in IE11 and Edge. Specifically, the resulting window ends up being 56px x 1203px. In chrome, the same code generates a kendo window that is 1174px x 520px, which is much more usable.

When I set the size to be "large" or "medium" or "small", I get an acceptable result in IE/Edge (which is to say that it doesn't render a window that's incredible narrow and long). Of course, setting the height/width explicitly works as expected across both browsers.

Here's example code I'm using to initialize the window:

@(Html.Kendo().Window()
    .Name("wndSample")
    .Title("Add Sample")
    .Actions(actions => { actions.Close(); })
    .Draggable()
    .Resizable()
    .Modal(true)
    .Visible(false))

And code that I use to populate and open the window

$("#sp_wndSample").click(function (e) {
        e.preventDefault();

        // Show progress indicator until window loads
        kendo.ui.progress($("#wndSample"), true);

        $("#wndSample").kendoWindow({
            refresh: function () {
                // progress off
                kendo.ui.progress($("#wndSample"), false);
            }
        });

        // populate 
        var m_dialog = $("#wndSample").data("kendoWindow");
        m_dialog.refresh('@Html.Raw(Url.Action("_SomePartialView","Some", new { pParam1UUID = Model.Param1UUID, pParam2 = "SomeValue" }))')
        m_dialog.setOptions({
            modal: true,
            size: "auto",
            position: {
                top: 70,
                left: 150
            }
        })
        m_dialog.title("Some Title");
        m_dialog.open();
    });

And on the off chance that this is really a CSS problem, here's a snippet from the custom CSS I'm using:

/* reset everything to the default box model */

*, :before, :after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* set a border-box model only to elements that need it */

.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

Ideally I'd like to figure out why the kendo window is sized different in Chrome vs IE11/Edge and determine what changes are needed so that it sizes correctly (with size = "auto") on both browsers.

Answer 1

Please try this..its work for me

    var gridObj;
    $(document).ready(function () {
        gridObj = $('#gridName').getKendoGrid();
        gridAutoHeight(gridObj);
        resizeGrid();
    });
    $(window).resize(function () {
        gridAutoHeight(gridObj);
        resizeGrid();
    });
    function gridAutoHeight(gridObj, bottomMargin) {
        try {
            if (gridObj) {
                gridObj.element.height($(window).height() - gridObj.element[0].offsetTop - (110) - (bottomMargin || 120));
                gridObj.resize();
            }
        } catch (e) {
            console.log('Error resizing grid: ' + e.toString());
        }
    }
    function resizeGrid() {
        var gridElement = $("#Gridrgrid");
        gridElement.data("kendoGrid").resize();
        setPageSize();
    }
    function setPageSize() {
        var grid = $("#gridName").data("kendoGrid");
        var windowHeight = $(window).height();
        //Custom Logic for pageSize
        if (windowHeight >= 900) {
            grid.dataSource.pageSize(100);
        }
        else if (windowHeight >= 800) {
            grid.dataSource.pageSize(70);
        }

        else if (windowHeight >= 700) {
            grid.dataSource.pageSize(50);
        }
        else if (windowHeight >= 500) {
            grid.dataSource.pageSize(40);
        }
        else if (windowHeight >= 400) {
            grid.dataSource.pageSize(30);
        } else {
            grid.dataSource.pageSize(20);
        }
    }