CODEWITHSUNDEEP
cssangularjsangular-material
I think I can code
I think I can code

Reputation: 647

Angular Material Tabs ink bar on top

I have a basic tab collection. Its going to function as buttons, no actual content:

<md-tabs md-align-tabs="bottom">
    <md-tab>Canvas 1</md-tab>
    <md-tab>Canvas 2</md-tab>
    <md-tab>Canvas 3</md-tab>
    <md-tab>Canvas 4</md-tab>
</md-tabs>

I'm trying to use the tab collection at the bottom of the page. Any idea about how to move the ink bar to the top of the tab collection instead of the bottom?

md-align-tabs does not change the location of the ink bar in my testing. I was unable to identify a solution with pure CSS.

Upvotes: 2

Views: 2416

Answers (2)

Sumit Ganjave
Sumit Ganjave

Reputation: 83

override .mat-ink-bar class

.mat-ink-bar{
   top:0px !important;
 }

Upvotes: 0

ajmajmajma
ajmajmajma

Reputation: 14216

You are looking to override the md-pagination-wrapper css value. I would not recommend doing it globally because I don't know what else it effects honestly but if you change it to 

md-pagination-wrapper {
 height: 2px;
 ...
}

You will get the effect you are looking for. Here is a codepen for example - http://codepen.io/anon/pen/vKdkzj . I would put a custom override class or id on it though so you don't break anything globally.

An example of what the custom override would look something like this -

Put a custom id or class on your tabs :

 <md-tabs md-align-tabs="bottom" id="ink-top-fix">

Use to target md-pagination-wrapper from custom id (or class, whatever you choose to use) 

#ink-top-fix md-pagination-wrapper {
   height: 2px;
}

Upvotes: 2

Related Questions