Bug in toolbar presentation of dropdowns on iPhone/Safari

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 03 Feb 2023 12:22 by ADMIN

Release R2.2023-Increment.1(15.Mar.2023)

Markus

Created on: 24 Sep 2021 12:11

Category: Editor

Type: Bug Report

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:

img-1568.PNG

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

Create an account Log In

View

Type

Status