Angular Material Tabs ink bar on top

Question

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.

Answer 1

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;
}

Answer 2

override .mat-ink-bar class

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