Editor formatting tool position and size not adjusting in IE 11

[Joran]

Hello Telerik community,

In the application I'm building I am trying to implement the Telerik UI Editor. While the size and position of the editor itself is completely fine, I seem to get some problems when trying to open some of it's tools which are connected to dropdown sections. These happen when using the tools 'formatting' and also when accesing the three-dotted "more tools" button.

I found online that it could maybe be caused by the jQuery version I'm using, so I tried updating to jQuery 3.3.1, but without luck unfortunately.

I am only getting this problem with Internet Explorer 11. Chrome or even simulating IE 10 seem to work fine.

I'm using ASP.NET Core 2.1. jQuery version 3.3.1. Kendo UI for ASP.NET Core.

I tried the implementation of the demo given here: https://demos.telerik.com/aspnet-core/editor/index.

I have tried both turning 'Resizable' true or false.

I also read that the positioning is caused by the scrollbar, which is true for me. However I don't know how to solve this, since the solution was to upgrade jQuery.

For my lay-out I'm using CSS Grid in combination with Flexbox.

 

Here's the code snippet of the Telerik editor implementation.

@(Html.Kendo().Editor()
                  .Name("editor")
                  .HtmlAttributes(new {style = "height:440px", aria_label = "editor"})
                  .Resizable(resizable => resizable.Toolbar(true).Content(true))
                  .ImageBrowser(imageBrowser => imageBrowser
                      .Image("~/images/{0}")
                      .Read("Read", "ImageBrowser")
                      .Create("Create", "ImageBrowser")
                      .Destroy("Destroy", "ImageBrowser")
                      .Upload("Upload", "ImageBrowser")
                  )
                  .Value(@<text>
                             <p>
                                 Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br/>
                                 In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                                 and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
                                 accessibility standards and provides API for content manipulation.
                             </p>
                             <p>Features include:</p>
                             <ul>
                                 <li>Text formatting & alignment</li>
                                 <li>Bulleted and numbered lists</li>
                                 <li>Hyperlink and image dialogs</li>
                                 <li>Cross-browser support</li>
                                 <li>Identical HTML output across browsers</li>
                                 <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
                             </ul>
                             <p>
                                 Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
                                 <a href="http://www.telerik.com/forums">feedback</a>!
                             </p>
                          </text>)
                  )

 

Here are some screenshot of the problem:

 

[Joran]

The first screenshot is showing a working dropdown when there is no scrollbar.

The last screenshot shows it working in IE10.

The other 2 screenshots show the problem.

[Ianko]

Hi Joran,

If you are using an older version of Kendo UI this might be related to an already fxed bug. You can try upgrading and see if that resolves the issue. 

If this is not the case, most probably, it is a case related to the layout you have. In order to properly determine what might be the problem, please isolate the case in a simple, locally runnable application and send attach it here so that I can take a look.  

Regards,
Ianko
Progress Telerik

[Joran]

Hello Ianko,

I am currently running version 2018.3.911 of the trial version for ASP.NET Core 2.1 (Telerik.UI.for.AspNet.Core.Trial). It is the latest version I am able to install on NuGet package manager.

I have attached a small application with the problem. Some of the attributes in the CSS file don't need to be set in the small application, however they do need to be set in the real application. So it may seem that deleting some of the attributes can be deleted to fix the problem, however that won't help me with the real application. It's hard to explain, but the main reason I have to use the CSS like this is to make IE have the lay-out fullscreen while using css-grid + flexbox (having the footer defined in a css-grid stay at the bottom) and having no text overflow in the small div's you can see in the screenshots.

If you need more files, please let me know.

Thank you for looking into this.

Here is the file:

https://mega.nz/#!alQ2EIBZ!_sOyjFuNb3kwyAqsHpGbIQmqAF-zyOhhN7KtNiyXbHQ

[Ianko]

Hi Joran,

The link provided does not seam to work. I was unable to navigate to a file that I can download. 

Regards,
Ianko
Progress Telerik

[Joran]

Hmm, it seems to work for me and others who try to go to the link.

Maybe this one works:

Application URL

[Ianko]

Hi Joran,

It might be blocked for our organization network by our admins. You can see what I get here: https://www.screencast.com/t/W8bwh8A1u7K.

Regards,
Ianko
Progress Telerik

[Joran]

Hello Ianko,

I have uploaded the file to WeTransfer, hopefully it will work.

Here's the new link:

New link

[Ianko]

Hi Joran,

I contacted a colleague that is more knowledgeable with front-end topics. It appears that there is some known bug with IE11 rendering reagrding min-height and flexbox display. You can read more about that here: https://stackoverflow.com/questions/44700068/flexbox-min-height-and-ie11. 

The solution we found is to remove the min-height setting from the .container rule and add min-height: 100vh rule to the body. You can check that out in this dojo: https://dojo.telerik.com/oYOZiheB/13. 

Regards,
Ianko
Progress Telerik

[Joran]

Hello Ianko,

Thank you for the help.

It indeed seems to fix the problem with the telerik components.

However, once I apply this in combination with css-grid components, the rows don't seem to stretch out to the bottom as well as they used to.

I edited the dojo and added a CSS-grid. It has maybe more to do with the  fact that I use calculations of viewport heights and width instead of fractions for the rows, but I seem to get the right aspect ratio in the rows when using fractions only (in IE11). I might be using CSS-grid wrong when I do this, but I don't seem to get these issues when using Chrome.

You can see what I mean here (load in IE11):

https://dojo.telerik.com/oYOZiheB/17

This has probably more to do with CSS problems and is probably going out of the scope of this Telerik problem, but just in case u do have an idea how to fix this I would be very greatful.

[Ianko]

Hello Joran,

I am afraid that this is a case more related to the application layout and cross-browser CSS topic. I cannot guarantee, but maybe using JavaScript to calculate would work better for cross-browser issues like this one.

Regards,
Ianko
Progress Telerik

[Joran]

Hello Ianko,

That's unfortunate. When you talk about using JS to calculate, do you mean to calculate the position of the pop-up?

Do you know which classes I would have to target for that to work?

[Ianko]

Hello Joran,

I am not referiing to calculating the popup position and adjust it. That is already calculated and tuned correctly. I am refering to the layout you are after to be calculated via JS and fine-tuned as it seems that IE does not handle well the CSS Incorporated. 

Regards,
Ianko
Progress Telerik

[Joran]

Hello Ianko,

I think I might have found the solution.

In your Dojo you put the "display: flex" only on the body. In the example you linked it was set in both html and body.

When I put display: flex to html, body I no longer had the issue of the container not going full 100% of the page in IE11.

However now the problem occured in Chrome. So i had to set min-height: 100vh in the container for it to work in Chrome again.

But this broke the telerik pop-up again in IE11. So I searched for setting css on only a certain browser, and set min-height to 0 on IE11. Now it works in both browsers.

Here is a new Dojo with commented lines of it working:

https://dojo.telerik.com/oYOZiheB/33

[Ianko]

Hi Joran,

Thank you for sharing the solution with us.

Regards,
Ianko
Progress Telerik

[Joran]

Hello Ianko,

Thank you for helping out and setting me on the right track.