CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-3focus
Mona Coder
Mona Coder

Reputation: 6316

Bootstrap 3 btn-group lose active class when click anywhere on the page

I am working on the following demo. I am looking to discover why btn-group is losing Active class whenever I click any where on the page.

I was expecting the btn-group toggle only between each other. Did I do any thing wrong here?

<div class="container">
    <div class="well">
        <div class="btn-group">
            <button type="button" class="btn btn-default" id="regi1">Left</button>
            <button type="button" class="btn btn-default" id="regi2">Middle</button>
            <button type="button" class="btn btn-default" id="regi3">Right</button>
        </div>
     </div>
</div>

Upvotes: 39

Views: 44324

Answers (2)

Fakeer
Fakeer

Reputation: 1034

I came here looking for an Angular solution. The ng-class is what prevents the deselection on blur.

<div class="btn-group">
  <label class="btn btn-outline-warning"
        ng-class="o.value == myinput.selected_value? 'active':''"
        ng-repeat="o in options">
    <input type="radio"
        autocomplete="off" 
        ng-value="{{o.value}}"
        ng-model="myinput.selected_value">
    {{o.value)}}
  </label>
</div>

Upvotes: -1

Serlite
Serlite

Reputation: 12258

So, (as mentioned in the comments) that gray fill you see isn't actually an active class being applied - it's the focus selection behaviour of that particular Bootstrap button element. (Like the dotted outline of a hyperlink.) Try pressing Tab after clicking a button, and you should see the focus selection change.

One way to get the behaviour you want is to apply the active class yourself, and have a bit of jQuery to swap the active class when clicking a button in the group. Here's what the snippet might look like:

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

The code above removes the active class from all .btn elements in the .btn-group, then applies the active class to the one that was just clicked.

Here's a JSFiddle demo to show you what this achieves (note that I coded the first button to have the active class in the HTML to start with). If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!

Upvotes: 103

Related Questions