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

Problem with DropDownList, iFrame and iPad.

13 Answers 719 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
Giovanni asked on 03 Apr 2013, 02:12 PM
Hello,
I have problem when I use DropDownList inside a page loaded into an iframe and when I use an iPad (I don't know if other touch device have the same behaviour). I have attached a small example.

In the example you can see two DropDownList, one in the main page and the other one in a second page that is loaded into an iframe.
When I use one of the many browser on Windows (IE, Firefox, Chrome...), all works fine. 
When I use Chrome or Safari  on iPad I have a strange behaviour: if I change the selection on the first dropdown all works fine, instead when I try to change the selected item in the second dropdown, the popup close immediatly without changing che selection.

Any dropdown in the page loaded inside the iframe have the problem.
This is a small example and the iframe have no sense, but in my projects I must use iframes.

How can I fix this issue?

Thanks.

EDIT: 04/04/2013
The previous version (2012.3.1315) works fine and the dropdownlist works as expected in the iframe too.
The new one (2013.1.319) has the descripted behaviour.


13 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Apr 2013, 10:01 AM
Hi Giovanni,

We need some time to investigate the exact cause of this problem. I will post further details as soon as I have them. Thank you for your patience.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Keith Pepling
Top achievements
Rank 1
answered on 20 Nov 2013, 08:21 PM
I am having the same issue on the iPad when I have a grid with a custom editor of dropdown on the grid and the grid is inside an iFrame.  If I run this same grid outside the iframe I have no issues but inside it the dropdown will not open.  When I click to open the dropdown it instead rebuilds the editor.
0
Dimo
Telerik team
answered on 21 Nov 2013, 08:54 AM
Hello Keith,

We have researched the problem a lot and I am afraid the prospects for fixing it do not look good. The issue is caused by iOS and browser-specific behavior related to the iframe stealing the focus from the DropDownList popup.

In general, we recommend avoiding iframes in iOS web applications, as they exhibit other problems as well, e.g. unscrollability.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Keith Pepling
Top achievements
Rank 1
answered on 22 Nov 2013, 06:14 PM
I am only having issues with the dropdown inside the grid but a dropdown inside a kendo window inside the iframe is not experiencing problems.  What I did as a work around at least is that when using iOS the edit for any cells that use a dropdown puts the dropdown inside a kendo window.  Avoiding iframes would be nice but it's an application built around using them.
0
Amanda
Top achievements
Rank 1
Iron
answered on 14 Aug 2014, 08:50 PM
[quote]Dimo said:Hello Keith,

We have researched the problem a lot and I am afraid the prospects for fixing it do not look good. The issue is caused by iOS and browser-specific behavior related to the iframe stealing the focus from the DropDownList popup.

In general, we recommend avoiding iframes in iOS web applications, as they exhibit other problems as well, e.g. unscrollability.

Regards,
Dimo
Telerik
 
[/quote]

Dimo, I'm using RadWindows with RadDropDownLists and am seeing the behavior Giovanni mentioned in the original post. Are RadWindows (since they're IFrame based) not supposed to be used on iOS applications?  Is there another suggestion you can offer?

Thank you!
0
Dimo
Telerik team
answered on 15 Aug 2014, 12:10 PM
Hello Amanda,

I am not sure whether you are talking about the ASP.NET AJAX RadWindow or the Kendo UI Window. These are different components, but both of them can be used without an iframe. Please refer to the online demos of the respective component.

On a side note, popup Windows are not the best possible user interface option for mobile devices. Although they work and can be used, they are not very convenient to end users.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Puneet
Top achievements
Rank 1
answered on 03 Oct 2019, 09:25 PM

Hi My problem is quite similar to this post but the issue i am facing is i have a kendo dropdownlist which is not selecting the item in IPAD (Safari browser). It works fine in Android, desktop. Could you please tell me the issue. My code to display the dropdown list is:

 @Html.TextBoxFor(
        m => m.State,
        new {
            @class = "address-state",
            data_source = Json.Encode(Model.StateList),
            data_role = "dropdownlist",
            data_text_field = "Text",
            data_value_field = "Value",
            data_test_element = "edit-state-dropdown",
            data_option_label = Html.GlobalResource("Strings", "Views_Settings_ChangeAddress_Index_State_Dropdown_Default")      
        })

 

0
Petar
Telerik team
answered on 07 Oct 2019, 11:12 AM

Hi Puneet,

Can you give me more details about the scenario and the device you are testing on?

What is the iOS version of the device you test on? Is the DropDownList positioned in an iFrame as discussed in the previous posts? 

Can you provide a runnable project in which the reported issue can be reproduced? If I have a runnable project it would be easier to find what is triggering the unexpected behavior. 

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Puneet
Top achievements
Rank 1
answered on 07 Oct 2019, 11:59 PM

Hi,
This is a defect we found out in Kendo dropddownlist as Dropdown list item not selected in IPAD 13.0 Safari browser - Desktop browser view. However, Mobile view is working fine. Chrome and Firefox is working fine.

IPAD IOS version - 13.0

Dropdownlist is position in iframe

I am also send you the pic. Please find attached

Could you please check this defect or If it is fixed. please let me know. I hope you understand my issue. If there is any miscommunication i will be happy to discuss more.

 

Thanks
Puneet Chutani

0
Puneet
Top achievements
Rank 1
answered on 08 Oct 2019, 12:03 AM

Hey, 

 

Addition to the above reply we have also used the Override dropdown list code for our work. The code is as mentioned below:

 

(function ($) {
"use strict";

var overlayContainer = $('<div></div>');
var view = null;
var dropdownContainer = null;
var dropdownAnimationContainer = null;
var closeContainer = $('<div id="CloseContainer" class="k-window-titlebar k-header close-container"></div>');
var isPreventDefault = true;
var currentDropdown = null;
var globalContainerHeight = 0;

// This function checks if its a lumia device with IE browser.
function isIEMobile() {
var regExp = new RegExp("IEMobile", "i");
return navigator.userAgent.match(regExp);
}

// This function builds the close container region which will
// be appended above the dropdown container in a mobile small device.
function buildCloseContainer() {
var titleSpan;
var dropDownSelect = Resources.Shared_DropDown_Select;
if (dropDownSelect !== undefined && dropDownSelect !== null && dropDownSelect !== "") {
titleSpan = $('<span class="k-window-title">' + dropDownSelect + '</span>');
} else {
titleSpan = $('<span class="k-window-title"></span>');
}
var actionDiv = $('<div class="k-window-actions"></div>');
var actionButton = $('<a href="#" class="k-window-action k-link" title="close"></a>');
var span = $('<span role="presentation" class="k-icon k-i-close"></span>');
actionButton.append(span);
actionDiv.append(actionButton);
closeContainer.append(titleSpan);
closeContainer.append(actionDiv);
}

// Function to set the selected item in a dropdown in view
// when the dropdown is opened.
function scrollPopup(popup) {
var element = popup.element;
var selectedItem = element.find(".k-state-selected");
if (selectedItem.length === 0) {
return;
}

if (element.find(".km-touch-scrollbar").length !== 0) {
return;
}

// If the selected item is the option label,
// then scroll to the top because that is where the option label is located.
if (selectedItem.hasClass("k-list-optionlabel")) {
element.scrollTop(0);
return;
}

var selectedGroup = selectedItem.closest("ul");
var completeList = selectedGroup.closest("div");
var itemHeight = selectedItem.outerHeight();
var itemTop = selectedItem[0].offsetTop + selectedGroup[0].offsetTop + completeList[0].offsetTop;

// Two pixels are subtracted to compensate for the border.
var scrollHeight = element.outerHeight() - 2;
var scrollTop = element.scrollTop();

// Three pixels are either added or subtracted to compensate for the margin.
if (scrollTop > itemTop) {
scrollTop = itemTop - 3;
} else if (itemTop + itemHeight > scrollTop + scrollHeight) {
scrollTop = itemTop + itemHeight - scrollHeight + 3;
}

element.scrollTop(scrollTop);
}

// This function makes the dropdown container appear like a popup.
// The poup height is set dynamically based on number of items.
// The popup height is set to 80% of view port height.
// The popup is centered to the viewport.
function buildResponsiveDropdown(that, e) {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
debugger;
var listItem = that.element.find(".k-item");
var listHeight = 0;
// Calculating list height.
if (listItem.length !== 0) {
listItem.each(function (index) {
listHeight += listItem.outerHeight();
});
}
// Account dropdown select item.
var selectItem = e.sender.element.find('.account-list-select-item');
// Adding option label height to list height.
if (selectItem.length !== 0) {
// For account dropdowns.
listHeight = listHeight + selectItem.outerHeight() + 32;
} else {
var defaultValue = that.element[0].firstElementChild.innerText;

if (defaultValue == "Please select...") {
// Setting height for dropdown whose option item is Please Select..
listHeight = listHeight + listItem.outerHeight() + 18;
}
else if (defaultValue == "All") {
// Setting height for dropdown whose option item is All.
listHeight = listHeight + listItem.outerHeight() + 20;
}else if (defaultValue == "Select a reason...") {
// Setting height for dropdown whose option item is 'Select a reason...'.
listHeight = listHeight + listItem.outerHeight() + 20;
} else {
// For dropdowns without option item removing one list item height.
listHeight = listHeight - listItem.outerHeight() + 40;
}
}
// Setting container height to 80% of viewport height.
var containerHeight = 0.8 * viewportHeight;
// Adding 1 to list length to include option label.
var listLength = view.length + 1;
// 4px margin on top and bottom for each item.
var marginCompensation = listLength * 8;
//var dropDownContainerWidth = $('.k-list-container').width();
var dropDownContainerWidth = 0.9 * viewportWidth;
listHeight = listHeight + marginCompensation;
if (listHeight < containerHeight) {
containerHeight = listHeight;
}
// left value to be set for the dropdown container.
var left = ((viewportWidth - dropDownContainerWidth) / 2) - 2;
// Top value to be set for the close container.
var closeContainerTop = (viewportHeight - containerHeight) / 2;
// Top value to be set for the dropdown container. 
// 50px is removed to compensate the height of close container.
var top = (viewportHeight - (containerHeight - 50)) / 2;
$('.k-list-container').css({ "top": top + "px", "left": left + "px", "height": (containerHeight), "position": "fixed", "width": "90vw", "max-height": "80vh" });
$('.k-animation-container').css({ "top": top + "px", "left": left + "px", "height": (containerHeight), "position": "fixed", "width": "90vw", "max-height": "80vh", "transform": "none" });
closeContainer.css({ "top": (closeContainerTop + 9) + "px", "left": (left) + "px", "width": ($('.k-list-container').width() + 6), "display": "block" });
$('.k-list-container').before(closeContainer);
}

// This function closes the dropdown container.
function RemoveDropdown() {
if (dropdownContainer !== null && dropdownAnimationContainer !== null) {
dropdownContainer.removeClass('k-state-border-up');
dropdownAnimationContainer.css('display', 'none');
dropdownContainer.css('display', 'none');
var dropdownWrap = $('.k-dropdown-wrap');
dropdownWrap.removeClass('k-state-active k-state-border-down');
}
}

// This function removes the dynamically created close container.
function RemoveCloseContainer() {
var closeContainer = $('.close-container');
if (closeContainer.length !== 0) {
closeContainer.each(function () {
$(this).html('');
$(this).remove();
});
}

if (overlayContainer.length != 0) {
    overlayContainer.css('z-index', '1001');
overlayContainer.remove();
}

var overlay = $('.custom-overlay');
if (overlay.length != 0) {
overlay.remove();
}
}

// Window resize event to remove js injected styles if browser size is changed.
// This will prevent js injected styles from persisting in desktop browsers.
$(window).resize(function () {
if (isBreakpoint('xs')) {
RemoveDropdown();
RemoveCloseContainer();
}
if (dropdownContainer !== null) {
dropdownContainer.each(function (index) {
$(this).removeStyle('top');
$(this).removeStyle('left');
$(this).removeStyle('height');
$(this).removeStyle('position');
$(this).removeStyle('width');
$(this).removeStyle('max-height');
});
}
if (dropdownAnimationContainer !== null) {
dropdownAnimationContainer.each(function (index) {
$(this).removeStyle('top');
$(this).removeStyle('left');
$(this).removeStyle('height');
$(this).removeStyle('position');
$(this).removeStyle('width');
$(this).removeStyle('max-height');
});
}
});

// On click of close button of dropdown popup, removing the popup
// and restoring to default dropdown state.
$('body').on('click', '.k-window-action', function (e) {
RemoveDropdown();
RemoveCloseContainer();
// This is to stop the page from scrolling to the top when closing the dropdown popup.
e.preventDefault();
});

$.extend(window.kendo.ui["DropDownList"].fn.options, {
// The following is used to set the DropDownList maximum height
// until we get the fixes from Kendo UI Q1 2016 or later.
open: function (e) {
isPreventDefault = true;
var that = this;
var height = this.options.height;
this.popup.element.css({ "max-height": height + "px" });
// Fix for security questions not being displayed completely.
$(".k-list-container").children("div").css("height", "auto");

// TODO: Fix the leak where event binding on each open()
// will keep attaching an additional event handler.
// The leak gets cleared up upon navigation to another page.

this.popup.element.on("mousedown", function (e) {
isPreventDefault = false;
// Needed to set _prevent because of an IE bug.
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15558714/
if ($(e.target).data("role") === "popup") {
that._prevent = true;
}
});

this.popup.element.on("focusout", function (e) {
// This part compensates for the workaround above from the IE bug.
if (that._prevent) {
that._prevent = false;
that._blur();
that._inputWrapper.removeClass('k-state-focused');
that._open = false;
}
});

view = this.dataSource.view();
if (isBreakpoint('xs')) {
var kendoOverlay = $('.k-overlay');
// When opening dropdown inside a lightbox, setting the z-index of 
// overlay higher than that of lightbox overlay.
if (kendoOverlay.length != 0) {

overlayContainer.css('z-index', '10003');
}
overlayContainer.addClass('custom-overlay');
$(document.body).append(overlayContainer);

}
},
animation: false,
close: function (event) {
if (isBreakpoint('xs')) {
if (isPreventDefault) {
event.preventDefault();
} else {
if (isBreakpoint('xs')) {
RemoveCloseContainer();
}
}
}
},
popup: {
activate: function(e) {
// Fix for security questions dropdowns not showing all questions.
$(".k-list-container").children("div").css("height", "auto");

scrollPopup(this);

// Responsive dropdown.
if (isBreakpoint('xs')) {
buildCloseContainer();
buildResponsiveDropdown(this, e);
dropdownContainer = $('.k-list-container');
dropdownAnimationContainer = $('.k-animation-container');
}
}
}
});

$.extend(window.kendo.ui["DropDownList"].fn, {
//_select: function (li, t) {
// this._prevent = false;
// this.focus();
// var listView = this.list;
// li = this._get(li);
// listView.select(li);
// // Revisit this when we use the filtering features:
// // t || this._state !== "filter" || (listView.filter(!1), this._state = "accept");
// if (li === -1) {
// this._selectValue(null);
// }
// scrollPopup(this.popup);
//},
/// <summary>
/// Removes the validation on a change event for dropdownlist if a 
/// new value has been selected.
/// </summary>
_change: function () {
if (isIEMobile()) {
isPreventDefault = false;
}
if (this._oldIndex != this.selectedIndex) {
var that = this,
change = "change",
index = that.selectedIndex,
optionValue = that.options.value,
value = that.value(),
trigger;
var fieldName = that.element[0].name;
var container = that.element.closest("form").find(".field-validation-valid[data-valmsg-for='" + fieldName + "'], .field-validation-error[data-valmsg-for='" + fieldName + "']");

if (container) {
container.addClass("field-validation-valid").removeClass("field-validation-error");
container.empty();
that.element.siblings("span.k-dropdown-wrap").removeClass("k-input-validation-error");
}


if (that._isSelect && !that._bound && optionValue) {
value = optionValue;
}

if (value !== that._old) {
trigger = true;
} else if (index !== undefined && index !== that._oldIndex) {
trigger = true;
}

if (trigger) {
that._old = value;
that._oldIndex = index;

that.trigger(change);

// trigger the DOM change event so any subscriber gets notified
that.element.trigger(change);
}
}
}
});
}(jQuery));

 

and apart from that we have used the kendo.core.ui.min.js file as reference. However that is quite old version 2014. Please tell me how to fix this issue. If you have any workaround or any fix according to my file. I will be very happy and grateful to you.

 

 

Regards,

Puneet

 

 

0
Petar
Telerik team
answered on 09 Oct 2019, 12:12 PM

Hi Puneet,

I've tried to reproduce the issue on a device with iOS 13, but I can't find any issues with the DropDownList.

Based on the old Kendo UI version used and the code modifications + the changes introduced in iOS 13 the issue might be a complex one and I cannot say what might be triggering the reported case. You may find interesting the list of breaking changes we've introduced during the years. 

You can try the following things trying to find the issue for the reported behavior:

  • I can see that you have an active trial license for Kendo UI for jQuery. What I would recommend is to try including the latest Kendo UI in your code and see if the issue will still exist. As there are a lot of breaking changes from versions 2013 to 2019, new issues might be presented but still you can see if the DropDownList will be correctly selected. 
  • Is the reported case reproduced on devices with older iOS versions? Do you have a device with older iOS to check the code on?

If you find what might be triggering the issue or think we can further help you with this case share the updates with the community. 

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Puneet
Top achievements
Rank 1
answered on 09 Oct 2019, 12:23 PM

Hi i have found out the problem why it is happening.

according to the above code i sent you

 When i remove animation:false then it works. I dont know why. Can you tell me.

 

Second thing i have noticed is that in above open: event may be the mousedown or focusout binding is incorrect thats why it is not called because when i put debugger on open event function it works and when i remove debugger it doesn't work. Very strange.

 

I hope you can now give me a better solution peter. I will be highly greatful. Please advice.

 

Regards,

Puneet Chutani

0
Petar
Telerik team
answered on 11 Oct 2019, 11:08 AM

Hi Puneet,

It is good you managed to find a possible workaround for the reported case!

As the version of  Kendo UI you use is on 6 years already there are a lot of breaking changes introduced in the different browsers and operating systems which may be triggering the reported behavior. Also, there are custom modifications applied over the code which are additional factors that might be the reason for the discussed behavior.

To be able to help you, and eventually find what is stopping the DropDownList from the expected selection, I will need a runnable project in which I can reproduce the case and test it locally. Please isolate the issue in a runnable project and send it back to me. 

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dimo
Telerik team
Keith Pepling
Top achievements
Rank 1
Amanda
Top achievements
Rank 1
Iron
Puneet
Top achievements
Rank 1
Petar
Telerik team
Share this question
or