Planned
Last Updated: 28 Sep 2021 15:34 by ADMIN
Markus
Created on: 24 Sep 2021 12:11
Category: Editor
Type: Bug Report
1
Bug in toolbar presentation of dropdowns on iPhone/Safari

Hello,

I have identified an issue within your editor within Kendo UI for jQuery.

When you open the editor on an iPhone, Safari will display some dropdowns in the editor's toolbar twice. You will see the Kendo dropdown, and to the right Safari displays the original <select>. It seems to be impossible to hide the <select> by CSS.

You can reproduce this issue at your own demo website, when you use Safari on an iPhone device:
https://demos.telerik.com/kendo-ui/editor/index

See sample presentation in the attached file.

 

Is this a known bug?
Do you have a workaround or a fix for this behaviour?

Kind regards,
Markus

Attached Files:
3 comments
ADMIN
Dimitar
Posted on: 28 Sep 2021 15:34

Hi Markus,

Thank you for this additional remark. I have updated the Dojo snippet. Indeed the correct workaround would be:

<style>
 html body .k-editor-toolbar .k-select-overlay {
   -webkit-appearance: none;
   opacity: 0;
   z-index: 11000;
   top: 0;
   left: 0;
   position: absolute;
   height: 26px;
   width: 0;
   margin: -4px 0 0;
}
</style>

 

Best regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Markus
Posted on: 28 Sep 2021 10:23

Hello Dimitar,

thanks for the quick workaround.

I have a supplement:

Applying your workaround shows the following behaviour:
The browser dropdown is hidden (good!), but if the user taps the background of the toolbar, safari shows the select options of the hidden select box (at the bottom of screen).

Fix: Replace "width: 100%" by "width: 0".

Regards,
Markus

ADMIN
Dimitar
Posted on: 27 Sep 2021 14:10

Hello Markus,

Thank you for reporting this issue to us. I am converting this tread to a publicly visible Bug report and you may track its status on our Feedback portal.

The following Dojo snippet provides a CSS workaround for it:

 

<style>
 html body .k-editor-toolbar .k-select-overlay {
   -webkit-appearance: none;
   opacity: 0;
   z-index: 11000;
   top: 0;
   left: 0;
   position: absolute;
   height: 26px;
   width: 100%;
   margin: -4px 0 0;
}
</style>

As a small token of gratitude for your report, I updated your Telerik points

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.