CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
JDurstberger
JDurstberger

Reputation: 4255

Change CSS of Bootstrap-Columns created by AngularJS

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

Upvotes: 0

Views: 431

Answers (1)

miszczak
miszczak

Reputation: 136

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

Upvotes: 1

Related Questions