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
what need override :focus style as
.buttondisplaytypeselected, .buttondisplaytypeselected:focus { background-color: tan; } here updated fiddle

Comments
Post a Comment