Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center align md-tab-group Header Labels

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>

like image 741
Jacob Avatar asked Aug 10 '17 14:08

Jacob


1 Answers

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.

like image 100
Faisal Avatar answered Oct 11 '22 07:10

Faisal