On multiple occasions, I have observed that styles applied to AngularJS 1.5 components do not seem to take effect. This has happened again recently, and despite trying to search online for the reason why this occurs, I am unable to find a solution. The current scenario involves having a view named home with a component called bt-table nested inside it.
Here is a simplified version of the template:
<section id="home">
<bt-table data="hc.tableData" options="hc.tableOptions"></bt-table>
</section>
In the styles (sass) for home, I have written the following selector:
#home
bt-table
margin: 0 0 30px 0
However, upon inspection, I noticed that these styles are not being applied. When checking in the browser's devtools, I can see that the styles are indeed parsed by the browser:
https://i.sstatic.net/ykVR7.png
What's interesting is that when I hover over the component in the elements panel, it does not highlight in blue as it normally would, even though it occupies space on the page.
So, what could be causing this issue? Could it be related to the AngularJS template compilation process or are there other factors at play?
UPD: Setting border: 10px solid red for the element shows that it does get rendered:
https://i.sstatic.net/YgvJo.png
UPD: Here is what the markup inside bt-table looks like:
<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 SEARCH BARS -->
<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>