Usability of ComboBox with Mobile Safari (iOS 6.1.3 – iPhone 3GS)

[mtbvfrMember]

Hi,

It appears that the activation of the DropDown List, of the ComboBox, is different between a Desktop Browser (Firefox 12) and Mobile Safari (iOS 6.1.3 – iPhone 3GS).

On the Desktop, when I click on the DropDown Arrow image the DropDown list appears without any problem.

On Mobile Safari, it appears that the display, of the DropDown list, is not activated unless you touch the Left edge of the DropDown Arrow which causes the selection of the text in the TextBox part of the ComboBox which then activates the Virtual Keyboard to appear after which the DropDown list appears.

I find this to be an annoyance as the Done button needs to be tapped to hide the Keyboard ao that the DropDown list can be scrolled.

Which Div is responsible for activating the display of the DropDown list? Is it “dropdownlistArrowjqxWidget” or “dropdownlistContentjqxWidget”?

Is it possible to make the “DropDown Button” wider? If so, would this help to eliminate the problem I am experiencing with Mobile Safari?

If the width, of the TextArea input element (inside the Div named dropdownlistContentjqxWidget), was 95% instead of 100%, would this circumvent the problem?

If so, could the Width Attribute, of the Style Property, be changed via Javascript to achieve this?

Thank you, Michael.

[Peter StoevKeymaster]

Hi,

Thank you for your comments about the usability of jqxComboBox. We will definitely improve it in the future version!

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mtbvfrMember]

Hi Peter,

Is there anything I can do, NOW, to achieve the improvements I am seeking?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

What needs to be done, I think, is to move, or copy, the MouseDown function from the dropdownlistArrowjqxWidget Div to its Child Div that does not have an “id” attribute.

I’ve tried adding code, such as the following before the end of the head Tag, to do that but it hasn’t been successful.

document.addEventListener(‘DOMContentLoaded’,
function () {
var events,source,destination;
//copying from one to one or more
source = $(“#dropdownlistArrowjqxWidget”);
destination = $(“#dropdownlistArrowjqxWidget div”);

//get all the events from the source
events = $(source).data(‘events’);
if (!events) return;

//make copies of all events for each destination
$.each(events, function(index, event) {
$.each(event, function(i, v) {
destination.bind(index, v.handler);
});
});
},
false
);

Afterwards, when I enter “$._data( $(“#dropdownlistArrowjqxWidget div”)[0], ‘events’ );” into the Console, I get an “undefined” response.

Thank you, Michael.

[Author]

Posts