0

I try to display some Employees with AngularJS and Bootstrap, but i am unable to override/change the CSS of my created bootstrap-columns (adding a shadow around every employee).

I think it has something to do with the CSS-specifics but I can not figure out what.

Index.html

<body data-ng-cloak="">
    <div class="webpage">
        <!-- Here is a banner with 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 by 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;
}
JDurstberger
  • 4,127
  • 8
  • 31
  • 68

1 Answers1

1

Try ng-class. Add some boolean value that will contain info about whether to trigger add the class or remove it from the element (e.g. by ng-click or ng-mouseover). More about ng-class: https://docs.angularjs.org/api/ng/directive/ngClass.

If it is problem with css only then try !important.

.webpage .content .ng-scope .row .col-md-4 .employee {
    box-shadow: 0 0 5px #000 !important;
}

EDIT:

I see you added space between .col-md-4 and .employee.

.webpage .content .ng-scope .row .col-md-4.employee {
    box-shadow: 0 0 5px #000;
}
miszczak
  • 136
  • 10
  • Your edited version works great! And here is the reason why: http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes. Thank You! – JDurstberger Apr 14 '15 at 19:20