0

I'm using Bootstrap buttons in Toggable Tab panes and what I find is that on iPhones, iPads, and on Samsung Galaxy S4 after a 'next' button is clicked the button colour changes and the pane changes but the button does not revert back to default colour it stays in hover/active colour. I've tried various tricks mentioned on the web including blur() but so far have not solved it. 

$('.btn-primary').focus(function() {
        this.blur();
});

window.onblur = function () {
  document.activeElement.blur();
};

The code is at: https://jsfiddle.net/qb3uckc8/2/

As well as setting blur() must I also change the css in jquery, or is there a css solution?

It works fine on PCs, just on mobiles it's not.

Nick W
  • 877
  • 2
  • 15
  • 30
  • Probably it stays in **active** state, so the CSS don't go back to normal. One solution would be erase the **:active** CSS and let only the CSS on **:hover**. Have you tried that? – matheusr May 05 '16 at 17:02
  • I've tried over riding the active state, you see that in the jsfiddle .btn-primary:active,.btn-primary.active,.btn-primary:focus,.btn-primary.focus, .open>.dropdown-toggle.btn-primary { color: #fff; background-color: #999999!important; border-color: #333399!important; } – Nick W May 08 '16 at 12:52
  • It seems like the button keeps the hover state. If you set only :active CSS it works https://jsfiddle.net/qb3uckc8/3/ – matheusr May 08 '16 at 12:59
  • 1
    Thank you matheusr. Your changes didn't work in my test file until I changed bootstrap from v3.3.1 that I had reference to v3.3.6 as referenced in the fiddles, then it worked. – Nick W May 11 '16 at 11:31
  • If I didn't want to change the bootstrap version (I'm worried what style changes this might cause), might this shim corrct the issue: https://github.com/twbs/mq4-hover-shim – Nick W May 11 '16 at 11:41
  • With Bootstrap 3.3.1, toggleClass works after the first click but not after the second click: $(".btn-primary").click(function(){ $(this).toggleClass("active").siblings().removeClass("active"); }); – Nick W May 11 '16 at 11:59
  • I think it's ok to upgrade to Bootstrap v3.3.6, it's just a minor update, shouldn't change any styles, just bugfixes – matheusr May 11 '16 at 12:04
  • I might try the Bootstrap update. I find that this works: $(".btn-primary").click(function(){ $(this).removeClass("active"); $(this).toggleClass("active").siblings().removeClass("active"); }); BUT I lose the hover colour. – Nick W May 11 '16 at 12:11
  • This is the best fix I could find to work without updating Bootstrap, seems to be a 'sticky hover bug on mobiles' (certainly iOS on iPad and iPhone and on Samsung browsers): http://stackoverflow.com/questions/15305914/bootstrap-buttons-get-stuck-down-on-mobile-devices – Nick W May 12 '16 at 19:35

0 Answers0