Change CSS of Bootstrap-Columns created by AngularJS

Question

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;
}

miszczak · Accepted Answer · 2015-04-14 19:12:12Z

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;
}

answered Apr 14, 2015 at 19:12

miszczak

13610 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JDurstberger Over a year ago

Your edited version works great! And here is the reason why: stackoverflow.com/questions/3772290/…. Thank You!

Collectives™ on Stack Overflow

Change CSS of Bootstrap-Columns created by AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related