Editor height grows on IE10

7 posts, 0 answers
  1. Paul
    Paul avatar
    113 posts
    Member since:
    May 2009

    Posted 15 Apr 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 16 Apr 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Peggy
    Peggy avatar
    11 posts
    Member since:
    Mar 2013

    Posted 05 May 2015 in reply to Dimo Link to this post

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

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 May 2015 Link to this post

    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.

  6. Peggy
    Peggy avatar
    11 posts
    Member since:
    Mar 2013

    Posted 08 May 2015 in reply to Dimo Link to this post

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

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 May 2015 Link to this post

    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.

  8. Peggy
    Peggy avatar
    11 posts
    Member since:
    Mar 2013

    Posted 11 May 2015 in reply to Dimo Link to this post

    Good deal, I obviously missed that :)  Thanks for the great support!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready