1

I am working on a webpage that uses twitter bootstrap to create dropdown menus with submenus. Everything is working fine on a desktop browser, but when I open it up in mobile safari on the iPad I run into issues. If there is an input of any kind below the submenu, rather than following that link, the touch event goes to the input instead. So if there is a text input underneath the submenu item, the cursor will enter that box.

Note that this only occurs on submenus, not the primary drop down. Also, the submenu item works just fine when there is nothing behind it. Any ideas?

mtmurdock
  • 12,756
  • 21
  • 65
  • 108

1 Answers1

0

I was stuck on a similar problem for a while today.

The issue I had, was that the underlying element was an HTML5 video. iOS does not allow any overlays on top of a video element. So, I added a jQuery method that hides the video element when the menu button is clicked. Something similar might work for your text inputs.

<script type="text/javascript">             
            jQuery(function() { 
                if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
                    jQuery("#menu-button").click(function() {
                        jQuery(".video-content").toggle();
                    });
                }
            });
    </script>
wolffmart
  • 81
  • 1
  • 7