CODEWITHSUNDEEP
cssangularangular-materialangular-material2
nuwan.chamara
nuwan.chamara

Reputation: 487

How to set the Angular material tab's mat-ink-bar to take the width of tab header text width

I want the Angular material tab's mat-ink-bar to take the width of the tab header text's width. Currently, it is larger than the tab header text width.

The following image shows how it looks now.

Current look

The following image shows how I want it to be.

How I want the mat-tab-ink-bar to look

Could you help me how to make this happen?

Upvotes: 8

Views: 9604

Answers (4)

Endre
Endre

Reputation: 181

In later versions of Angular Material (currently 15) you now have the option to use the fitInkBarToContent attribute.

<mat-tab-group fitInkBarToContent>
  <mat-tab label="Tab">Content</mat-tab>
</mat-tab-group>

See the examples under https://material.angular.io/components/tabs/examples#tab-group-ink-bar

Upvotes: 1

divya bharathi Narla
divya bharathi Narla

Reputation: 121

enter image description here I achieved this by removing min-width and padding on the .mat-tab-label class.. and adding margin as per my requirement to keep the labels apart. this worked as mat-ink-bar takes the width of mat-tab-label which was set min-width to 160px;

SCSS:

mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
    margin-bottom: 12px;
    .mat-tab-labels {
    .mat-tab-label {
        padding: 0 0 !important;
        min-width: 10px;
        margin-left: 95px;
    }
    }
}
}

Upvotes: 12

Sreekumar P
Sreekumar P

Reputation: 6050

Simply remove the background color of existing mat-link-bar (using background-color: transparent) and create a new style using pseudo class.

     .mat-ink-bar {
        background-color: transparent;
        &::before {
          content: '';
          display: block;
          width: 90%;
          background-color: #47a1f6;
          height: 6px;
          border-bottom-right-radius: 70px;
          border-bottom-left-radius: 70px;
          left: 5%;
          position: relative;
        }
      }

Looks like this:

enter image description here

Upvotes: 1

Georgekutty Antony
Georgekutty Antony

Reputation: 41

I have done it using after and before css pseudo classes, but for cutting a definite amount of the mat-ink-bar width. Please see the below SCSS code

  mat-ink-bar {           
                &:before,
                &:after {
                    content: "";
                    height: 2px;
                    width: 20px;
                    background-color: white;
                    position: absolute;
                    left: 0;
                }
                &:after {
                    left: initial;
                    right: 0;
                }
            }

Upvotes: 4

Related Questions