15

I am working on a website using Bootstrap and have a problem I can't seem to fix. Here is the draft of the site.

On the "What We Do" panel, I made a clickable modal window on the first thumbnail box (it says "Enterprise Software development" under the thumbnail). If you click the thumbnail on a non-mobile device, a modal window will pop-up.

On a desktop computer (or laptop), it works just fine. But on a iOS (iPhone, iPad, etc.) it doesn't work at all: i.e. tapping it doesn't bring up the modal window.

However, if you look lower on the page at the "Who We are" panel, there is a "See more about Tim..." button. If you click or tap on that button, it will work across all devices (include iOS).

The only difference I can see between the two is that the first one is on a <div> tag, whereas the second one is on a <button> tag.

Does Bootstrap not support starting up a modal window from a <div> on an iOS device? If it does, do you see anything wrong with my code that would make it fail only on iOS devices?

alex
  • 6,818
  • 9
  • 52
  • 103
Moshe
  • 353
  • 1
  • 3
  • 10

2 Answers2

33

Chris's answer is correct. Changing the div to a button would help clarify your markup. If, however, you need to keep the same markup, you can also add cursor: pointer to your div element to let safari know that this is something that might be clickable. It also let's mouse users have a standard visual cue that the element is clickable as well.

Just add the class clickable and then include the following CSS:

.clickable {
    cursor: pointer;
}

Here's an MCVE in Fiddle with the fix as well

notice I haven't used Bootstrap's btn classes here because they will add the cursor rule automatically.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • 1
    BTW, this Safari weirdness (w/ some extra details) is now documented on https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile – cvrebert Sep 14 '14 at 08:50
  • Thank you very much - it works!! You have saved us hours of wasted time which we would have wasted for no good reason1! Thank you once again, much appreciated. – pipalia Dec 15 '14 at 19:12
11

This isn't Bootstrap-specific at all, it's a general problem on iOS. By default, many not-usually-interactive elements (such as <div>s) aren't clickable/tappable on iOS.
See https://github.com/facebook/react/issues/134 and the links & follow-ups therein for some more details.
If possible, use a <button> or <a> instead. A <div> for an interactive element isn't very semantically appropriate anyway.

cvrebert
  • 9,075
  • 2
  • 38
  • 49