Ilya Ilin Ilya Ilin - 6 months ago 50
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

and component
inside it.

Simplified template:

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

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

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="" class="table table-striped">

<th ng-repeat="header in" st-sort="{{header.sortsearch}}" ng-bind="header.title"></th>
<tr ng-if=" === 'every'">
<th ng-repeat="header in">
<input st-search="{{header.sortsearch}}" placeholder="search for {{header.title.toLowerCase()}}" class="input-sm form-control" type="search"/>
<tr ng-if=" === 'all'">
<input st-search placeholder="search in all columns" class="input-sm form-control" type="search"/>

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

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

Nix Nix

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".

   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:


<section class="btn-table">

Then update your styles to:

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