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

Editor height grows on IE10

6 Answers 90 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 15 Apr 2014, 07:28 PM
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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Apr 2014, 10:02 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Peggy
Top achievements
Rank 1
answered on 05 May 2015, 04:24 PM

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;
}

0
Dimo
Telerik team
answered on 06 May 2015, 12:21 PM
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

See What's Next in App Development. Register for TelerikNEXT.

0
Peggy
Top achievements
Rank 1
answered on 08 May 2015, 02:54 PM

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; }

0
Dimo
Telerik team
answered on 11 May 2015, 07:19 AM
Hello Peggy,

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

Regards,
Dimo
Telerik

See What's Next in App Development. Register for TelerikNEXT.

0
Peggy
Top achievements
Rank 1
answered on 11 May 2015, 12:04 PM
Good deal, I obviously missed that :)  Thanks for the great support!
Tags
Editor
Asked by
Paul
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Peggy
Top achievements
Rank 1
Share this question
or