Ilya Ilin Ilya Ilin - 2 months ago 28
AngularJS Question

AngularJS 1.5 component styles aren't applied

Several times I noticed that styles added for AngularJS 1.5 components aren't really applied and now I encountered this again and can't google the reason why it happens so. The situation: I've got view

home
and component
bt-table
inside it.

Simplified template:

<section id="home">
<bt-table data="hc.tableData" options="hc.tableOptions"></bt-table>
</section>


In styles (sass) for
home
I write the following selector:

#home
bt-table
margin: 0 0 30px 0


Then I see it's not applied, go to devtools and see that styles are actually parsed by browser:



Also intresting: when I hover component in elements, I see this:



Notice how element isn't highlighted with blue as normal even though it has non-zero size?

So, why can it work so? Has it something to do with AngularJS template compilation process (it's my guess) or there are another reasons?

UPD: if I set
border: 10px solid red
for element, that gets rendered:


UPD: the markup inside bt-table looks like this:

<section id="table">
<div class="panel panel-default">
<div class="panel-heading">Table</div>
<table st-table="tc.data.data" class="table table-striped">

<!-- HEADERS, SORTING AND SEARCHBARS -->
<thead>
<tr>
<th ng-repeat="header in tc.data.headers" st-sort="{{header.sortsearch}}" ng-bind="header.title"></th>
</tr>
<tr ng-if="tc.options.search === 'every'">
<th ng-repeat="header in tc.data.headers">
<input st-search="{{header.sortsearch}}" placeholder="search for {{header.title.toLowerCase()}}" class="input-sm form-control" type="search"/>
</th>
</tr>
<tr ng-if="tc.options.search === 'all'">
<th>
<input st-search placeholder="search in all columns" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>

<!-- CONTENT -->
<tbody>
<tr ng-repeat="row in tc.data.data">
<td ng-repeat="column in row" ng-bind="column"></td>
</tr>
</tbody>

<!-- PAGINATION -->
<tfoot ng-if="tc.options.pagination">
<tr ng-if="tc.tdata.options.pagination.type === 'buttons'">
<td colspan="5" class="text-right">
<div st-pagination="" st-items-by-page="tc.tdata.options.pagination.itemsByPage" class="no-margin"></div>
</td>
</tr>
<tr ng-if="tc.options.pagination.type === 'input'">
<td colspan="5" class="text-right">
<div st-pagination="" st-items-by-page="tc.options.pagination.itemsByPage" st-template="components/l-table/custom-pagination.custom.html" class="no-margin"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</section>

Nix Nix
Answer

It's probably because you are targeting a custom element and chrome is setting it to display:inline. Two options:


Option 1: Add a style of "block".

bt-table{
   display: block;
}

Option 2 use replace(which is what I would do). You would set replace:true on the directive and then targeting the first child of section which isn't a custom element and will display to block:

<section id="table">

Other suggestions pick something else besides id=table . ids are supposed to be unique on the page. I'd recommend adding a class selector to target:

e.g.

<section class="btn-table">

Then update your styles to:

#home .bt-table{
    margin: 0 0 30px 0
}
Comments