Change CSS of Bootstrap-Columns created by AngularJS -
i try display employees angularjs , bootstrap, unable override/change css of created bootstrap-columns (adding shadow around every employee).
i think has css-specifics can not figure out what.
index.html
<body data-ng-cloak=""> <div class="webpage"> <!-- here banner navigation --> <div ng-view class="content"></div> </div> </body>
angularjs partial:
<link href="styles/booking.css" rel="stylesheet"/> <div> <div class="row search"> <div class="col-md-2"> <!--sidebar content--> search name: <input ng-model="query"> </div> </div> <div class="row"> <div class="col-md-4 employee" ng-repeat="employee in employees | filter:{name:query}" ng-click="onclickemployee($index)"> {{employee.name | uppercase}} <p>{{employee.quote}}</p> </div> </div> </div>
booking.css
.webpage .content .ng-scope .row .col-md-4 .employee { box-shadow: 0 0 5px #000; }
try ng-class
. add boolean value contain info whether trigger add class or remove element (e.g. ng-click
or ng-mouseover
). more ng-class
: https://docs.angularjs.org/api/ng/directive/ngclass.
if problem css try !important
.
.webpage .content .ng-scope .row .col-md-4 .employee { box-shadow: 0 0 5px #000 !important; }
edit:
i see added space between .col-md-4
, .employee
.
.webpage .content .ng-scope .row .col-md-4.employee { box-shadow: 0 0 5px #000; }
Comments
Post a Comment