I am using two ng-bootstrap components ngbDropdown
and ngb-pagination
and I would like them to align themselves vertically next to each other.
The ngb-pagination
component creates this HTML with a class of .pagination with a margin of 1rem
<nav>
<ul ng-reflect-class-name="pagination pagination-sm" class="pagination pagination-sm">
</ul>
</nav>
I have attempted to alter the class withing my Angular 2 component using the following.
@Component({
selector: 'wk-company-list',
template: require('./list.html'),
styles: [`
.pagination {
margin-top: 0;
background-color: greenyellow;
}
`]
})
Here is the full HTML off the page with these two controls
<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions"
rowSelection="multiple"
(cellClicked)="onCellClicked($event)"
(selectionChanged)="onSelectionChanged($event)">
</ag-grid-ng2>
<div class="align-middle">
<span ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary btn-sm" id="dropdownMenu2" ngbDropdownToggle>25</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item">25</button>
<button class="dropdown-item">50</button>
<button class="dropdown-item">100</button>
<button class="dropdown-item">200</button>
<button class="dropdown-item">1000</button>
<span class="text-muted">Total: {{vm.pagination.total}}</span>
</div>
</span>
<span class="float-xs-right">
<ngb-pagination
style="margin-top: 0"
(pageChange)="onPageChange($event)"
[(page)]="vm.pagination.no"
[pageSize]="vm.pagination.size"
[collectionSize]="vm.pagination.total"
size="sm"
[maxSize]="5"
[ellipses]="false"
[rotate]="true"
[boundaryLinks]="true">
</ngb-pagination>
</span>
</div>
Have you tried using the /deep/
or >>>
selector inside your component styles?
To cite the angular docs:
Component styles normally apply only to the HTML in the component's own template.
We can use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component.
See https://angular.io/docs/ts/latest/guide/component-styles.html for reference.
For example:
ngb-pagination /deep/ .page-item.disabled .page-link {
background-color: greenyellow;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With