Hello. I tried using an edit-combo box on a UX to present users with a dynamic list of choices in a web-based app. Since they can enter a new value in the input field or select from the list, I thought the edit-combo would work just fine. However, in mobile browsers I don't like how the keyboard pops up whenever the input field gets focus, even when the user presses the dropdown arrow on the input field. At that point, the mobile keyboard comes up, covers part of the list of choices and the user needs to close the keyboard before continuing to scroll through the list and make a selection, if that's what they want to do.
As an alternative, I removed the edit-combo box and populated the UX with a list control in its place. I display and hide it using an in-control button on the input field. It works perfectly as far as allowing the user to type directly into the input field or bring up the list of choices and select from it. On all desktop browsers, a vertical scroll bar appears, which is great. However, on mobile browsers, I can't get the list to scroll at all. No drag scrolling, no scroll bar. That leaves the user to only choose from the visible items in the list. Other than that, it works fine and I much prefer the way the list approach looks and feels from a user interface standpoint on a mobile device.
Any ideas on what I might try to get the list to scroll in mobile browsers? Not sure what other info you might need from me.
Also, as a related item, when I hide (client-side) the list after the user makes a choice, it works perfectly on the desktop under Chrome, Firefox, Opera, and Safari. However, on IE V11 (Win8) and MS Edge (Win10), a bottom horizontal scroll bar is left showing after the {dialog.object}.setControlDisplay('list1',false) command is executed. There is no horizontal scroll bar in my list at any other time. Again, any thoughts on why this might be happening? Also, this bottom scroll bar does not appear on any mobile browsers when the control is hidden, only in IE and Edge on the desktop.
Thanks for any help you can offer on this!
TomR
As an alternative, I removed the edit-combo box and populated the UX with a list control in its place. I display and hide it using an in-control button on the input field. It works perfectly as far as allowing the user to type directly into the input field or bring up the list of choices and select from it. On all desktop browsers, a vertical scroll bar appears, which is great. However, on mobile browsers, I can't get the list to scroll at all. No drag scrolling, no scroll bar. That leaves the user to only choose from the visible items in the list. Other than that, it works fine and I much prefer the way the list approach looks and feels from a user interface standpoint on a mobile device.
Any ideas on what I might try to get the list to scroll in mobile browsers? Not sure what other info you might need from me.
Also, as a related item, when I hide (client-side) the list after the user makes a choice, it works perfectly on the desktop under Chrome, Firefox, Opera, and Safari. However, on IE V11 (Win8) and MS Edge (Win10), a bottom horizontal scroll bar is left showing after the {dialog.object}.setControlDisplay('list1',false) command is executed. There is no horizontal scroll bar in my list at any other time. Again, any thoughts on why this might be happening? Also, this bottom scroll bar does not appear on any mobile browsers when the control is hidden, only in IE and Edge on the desktop.
Thanks for any help you can offer on this!
TomR
Comment