I want to center my tab bar where the labels are displayed so that i can add a side bar on the left that is connected to the tabs.Here's my code:
<div class="flex-container">
<div class="flex-item1">
<md-tab-group>
<md-tab label="PERSONAL">Personal content</md-tab>
<md-tab label="SOCIAL">Social content</md-tab>
<md-tab label="BUSINESS">Business content
<b-app></b-app>
</md-tab>
</md-tab-group>
</div>
<div class="flex-item2">
<div class="item item-5" fxLayout="column">
<md-input-container class="search-area">
<input mdInput placeholder="search" >
<!--md-icon svgIcon="thumbs-up"></md-icon-->
</md-input-container>
</div>
</div>
Approach 1 using ViewEncapsulation ( Recommended )
::ng-deep works great in this case, however it maybe depreciated going forward. The recommended way is to use ViewEncapsulation.
In your component, add the following encapsulation:
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
Add the following in your component.css:
.mat-tab-labels{
justify-content: center; /* align items in Main Axis */
}
Link to Plunker Demo with ViewEncapsulation.None
Approach 2 using ::ng-deep
Add the following in your component.css:
::ng-deep .mat-tab-labels{
justify-content: center; /* align items in Main Axis */
}
Here is a link to PLUNKER DEMO.
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