Bootstrap: Selecting Value From Dropdown box on iOS issue

[ljwilson]

Update: Confirmed that inde 15.5 r10 fixes this!

The Northwind mobile has the same behavior on an iPad:
http://progamma.com/nwindbootstrap/

Select Order Lines, Order Tab, Add new order, then click the dropdown button for customers. Try to select a customer with touch--it doesn't work.

Dropdown menus in the Navigator work ok though.

With an app compiled with inde 15.5 r9, type ahead in the combo box works, and as long as you type enough characters to get the number in the dropdown list to only one, you can then touch the return key to select.

...jack

[ljwilson]

Well here is what I've come up with so far to enable touch to select a value in a dropdown box on an iOS Device. The same should be true for any touch-enabled device. I haven't gotten scrollbars to show up on the iPad like they do on the desktop, but at least you can select a value now.

1. in "RD3\Objects\IDCombo.js", the OnTouchStart event function is there as an empty place-holder--no code attached to it. I copied the same code from the IDCombo.prototype.OnOptionClick function in the same file to this function.
2. To actually make the touchstart event fire, you have to add this to the "RD3\Objects\ValueListItem.js" ValueListItem.prototype.RealizeCombo function:
   

   Code: Select all

   if (!RD3_Glb.IsMobile())
  {
     obj.onmouseover = new Function("ev","return RD3_DesktopManager.CallEventHandler('"+comboid+"', 'OnOptionMouseOver', ev,"+idx+")");
     obj.onmouseout = new Function("ev","return RD3_DesktopManager.CallEventHandler('"+comboid+"', 'OnOptionMouseOut', ev,"+idx+")");
     obj.onclick = new Function("ev","return RD3_DesktopManager.CallEventHandler('"+comboid+"', 'OnOptionClick', ev,"+idx+")");
     //ljw 2016-12-08 added for touch devices
     obj.ontouchstart = new Function("ev","return RD3_DesktopManager.CallEventHandler('"+comboid+"', 'OnTouchStart', ev,"+idx+")");
   }

To test, you just need to unzip the contents of the attached file into your custom folder, and then run your bootstrap theme-enabled app that has dropdowns in it on an iPad or iPhone or some other touch-device.

custom3.zip

Sample custom\custom3.js to enable touchstart event

(2.69 KiB) Downloaded 465 times

[ljwilson]

Version 2 using in.de 15.5 r9: Scrollbars/scrolling in a dropdown now work:

Changes:

1. Added a custom.css which includes css to keep the scrollbars showing whenever content is more then will fit into the selections box (Source: http://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar).
2. Now handle the touchmove and touchend events for IDCombo.js

A new custom.zip file is attached which contains the custom.css and custom3.js files to put in your custom folder. Tested on iPad and iPhone.

custom.zip

custom.css and custom3.js for dropdown touch handling

(4.24 KiB) Downloaded 476 times

Unless I'm missing something obvious, hopefully in the next release of Bootstrap you can add this functionality for IDCombo into the standard release.

...jack

[lucabaldini]

Hi... now it should be fixed. We've checked your project and we found the problem. The solution is included in the 15.5 r10 release. Can you check it for me?

[ljwilson]

Yes, InDe 15.5 r10 fixes it!

Sorry, I edited the original post stating that, but I really should have done a reply as well.

In fact 15.5 r10 fixed every issue we had worked around for bootstrap (including the error messages not being cleared, which was mentioned in the release notes), so I was able to remove all of the custom3.js code I had included for bootstrap workarounds. Thanks for looking at this so quickly!

...jack

[lucabaldini]

:-)
I'm happy about that...

Actually I've to say thanks you as well... you found the problem, you reported it and you tryied to fix it... that gave as enough information needed to fix it... So, thankx a lot :-)))))