Editor height grows on IE10

[Paul]

Hi,
    When viewing the editor on IE10 the height grows by 86px above what ever height is set on the style height attribute. On other browsers and IE11 the height is calculated as expected.

To see what I mean if you view your basic usage editor demo on IE11 and inspect the element and look at the layout both the style height and layout height match. See image IE11.png

Then do the same in IE10 or change the Document mode in IE11 to IE10 and inspect the element you will notice the style height is set to what you expect but the layout height is now 86px bigger. See image IE10.png

This means that when you have things laid out nicely and then view under IE10 controls can disappear of the screen because the editor has grown moving controls further down the document.

Any suggestions on a solution to this would be greatly appreciated or any explanation as to why this is happen.

Thanks

[Dimo]

Hi Paul,

The problem is caused by different browser behavior. The Editor (when in classic iframe editing mode) uses a table with two rows and each row has one cell. The cell in the second row has a 100% height style applied, so that it occupies "all remaining space", except the toolbar. In IE10 the "remaining space" becomes the "Editor height".

When using the Editor's MVC wrapper and setting a different inline height style server-side is not reliable, you can use the following approach:

<style>

    .myEditor .k-editor {
        height: 446px;
    }

    .k-ie10 .myEditor .k-editor {
        height: 400px;
    }

</style>

<div class="myEditor">

@(Html.Kendo().Editor()
      .Name("editor")
)

</div>

Regards,
Dimo
Telerik

 

 

[Peggy]

Hello, please let me know if I am missing something, but I have this issue with IE11. I have css to override IE9 and IE11, IE9 works fine. See attached file for IE11, you can see the height of 50 is there in the css, but it is not represented on the web page. I am using ASP.NET MVC Version 2015.1.0429

.k-ie9 table.k-editor {
   height: 125px;
}

.k-ie11 .ie11Editor .k-editor {
    height: 50px;
}

[Dimo]

Hi Peggy,

The Editor's iframe has a default 100% height style, which makes it expand to fill the available vertical space in standard scenarios. For some unknown reason, however, setting a too small Editor height will not shrink the iframe beyond certain height, which seems to be around 200px. In order to make the Editor smaller (shorter), you need to apply an explicit height style to the Editor's iframe itself:

http://dojo.telerik.com/asebI

Regards,
Dimo
Telerik

[Peggy]

Thanks Dimo, very helpful!  All is working now.

I ended up having to add two css items versus just the one for the iframe, otherwise the editor was still using 250px for the height (see attached).

.customComments .k-editor iframe { height: 125px; }

.customComments .k-editor { height: auto; }

[Dimo]

Hello Peggy,

Well, yes, my example is using two height styles as well.

Regards,
Dimo
Telerik

[Peggy]

Good deal, I obviously missed that :)  Thanks for the great support!