How to get Bootstrap to not interfere with my button background colors set in AngularJS? -


in implementation of button menu, how can selected button have class buttondisplaytypeselected , others buttons have buttondisplaytypeunselected:

http://jsfiddle.net/edwardtanguay/73h46odc/3

it works when page displayed, , works when don't use bootstrap classes, how can correct background colors buttons bootstrap ?

  <span ng-repeat="displaytype in displaytypes">       <button ng-class="(displaytype.idcode == currentdisplaytypeidcode) ? 'buttondisplaytypeselected' : 'buttondisplaytypeunselected'" class="btn btn-default btn-xs "               ng-click="selectdisplaytype(displaytype.idcode)">{{displaytype.title}}</button>   </span> 

angular.module('myapp', []) .controller('maincontroller', function($scope) {      $scope.currentdisplaytypeidcode = 'topten';      $scope.displaytypes = [         {idcode: 'all', title: 'show all'},         {idcode: 'topten', title: 'top 10'},         {idcode: 'favorites', title: 'favorites'}     ];      $scope.selectdisplaytype = function (displaytypeidcode) {         $scope.currentdisplaytypeidcode = displaytypeidcode;     }      }) 

this because bootstrap add style when button focused (click on button , click on white background button gets actual color u need get, because when click on white background button gets blur , styles sets button through focus removed), check below image

enter image description here

what need override :focus style as

.buttondisplaytypeselected, .buttondisplaytypeselected:focus {     background-color: tan; } 

here updated fiddle


Comments

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -