Strange behavior in iPad

[penchiang]

My application is using tabulous and it is running well on all of the browsers on desktops, but not in mobile device, such as iPad or iPhone. I have no problem to dropdown the subtabs in iPad. However, nothing happened when clicked on any of the subtabs. I am wondering if anyone has the similar problems?

[techiferous]

Hi, are you using this with Twitter Bootstrap or do you have JavaScript that interacts with the tab markup? If so, the error can be in how the JavaScript or Bootstrap code interacts with the tab markup.

Otherwise, tabulous generates anchor tags which are extremely reliable and well supported across all browsers and devices, so I would recommend doing some more troubleshooting on your end as the problem is likely not with tabulous.

[penchiang]

Thanks for your prompt answer. Yes, I am using Bootstrap code. After reading your message, I did some search on Bootstrap and found a similar problem reported recently:

https://github.com/clevertech/YiiBooster/issues/65 (Dropdown Button doesn't work on iPhone or iPad)

Looks like it is a known bug for Bootstrap for sometime. Hopefully this is will be fixed in the next release of Bootstrap.

[penchiang]

Hi,

Someone suggests the following patch to fix this problem. I am not sure how to add the following code to my RoR application. Can you suggest a way to add the following code?

It turns out this is a twitter bootstrap bug which has been around for some time.

a temporary patch is this:

$('body') .on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }) .on('touchstart.dropdown', '.dropdown-submenu', function (e) { e.preventDefault(); });

[techiferous]

Put this code in your application.js file (and make sure that the file is loaded in your HTML page).

Make sure the code executes after the DOM ready event like so:

$(document).ready(function() {
  $('body')
  .on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); })
  .on('touchstart.dropdown', '.dropdown-submenu', function (e) { e.preventDefault(); });
});

And you'll need jQuery loaded as well.

[penchiang]

It works like a charm. I have been bothered by this problem for several days. THANK YOU SO MUCH for your help.

[techiferous]

You are welcome. And thanks for using tabulous.