0

Why do the four buttons at the bottom of this app not de-select after clicking on mobiles? They work correctly on desktop. I've been pulling my hair out trying to figure out what the deal is.

One interesting point. The Uber button is actually an link whereas the rest are s.

Here is the deployed app (final project for bootcamp): https://sipspot.herokuapp.com/

Here is the github repo: https://github.com/charlesmbrady/Project3

Please let me know if you have any ideas. Thanks in advance!

Here is the pertinent code with relevant CSS below it:

        <div className="bottombar">
          { this.state.theCheckinLatitude === 0 ? (
            <button className="cntrl-btn" data-test="controls-checkin" onClick={ this.checkIn }>CheckIn</button>
          ) : (
              <button className="cntrl-btn" data-test="controls-checkin" onClick={ this.checkOut }>ChkOut</button>
            ) }
          <button className="cntrl-btn" data-test="controls-drink" onClick={ this.drinkTracker }>+Drink</button>
          <a id="uber-button" className="cntrl-btn" data-test="controls-uber" href="https://m.uber.com/ul/?action=setPickup&pickup=my_location" target="_blank" rel="noopener noreferrer">Uber</a>
          <button id="friends-button" className="cntrl-btn" data-test="controls-friends" onClick={ this.contactFriends }>Friends</button>
        </div>

CSS for the pertinent elements. The display: items are the only bits I can imagine would have any impact on this problem.

.topbar>a, .topbar>button, .bottombar>a, .bottombar>button {
  background-color: #121212;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: inline-block;
  display: -moz-inline-box;
  width: 25%;
  padding: 10px;
}
Desmond Mullen
  • 159
  • 1
  • 8
  • Can you include the relevant code here? That will help others answer you question and will show the state of the code when the question was asked so that others in the future can get value out of the question, whereas a GitHub repo will update over time. – Henry Woody May 22 '19 at 04:48
  • 1
    Possible duplicate of [How to prevent sticky hover effects for buttons on touch devices](https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices) – Henry Woody May 22 '19 at 04:55
  • 1
    Henry Wood, the link you posted looks like it may do the trick! I have to follow-up on it in the morning, but it sounds like that's the solution. Thank you! – Desmond Mullen May 22 '19 at 05:03
  • Sorry about the typo in your name Henry Woody! You steered me right and I posted the solution below. Thanks again! – Desmond Mullen May 22 '19 at 13:16

1 Answers1

0

This solution is super-simple and works perfectly. Put the following media query in your CSS to show hover effects on devices that support hover (generally laptops/desktops). "Touch" devices like mobiles will not see this CSS and won't get tripped-up. Touch devices don't do hover well and that's ultimately what caused the "button-sticking-on" appearance.

@media (hover: hover) {
    /* code for devices that *support* hover (not mobiles) */
}
Desmond Mullen
  • 159
  • 1
  • 8