Search code examples
angularjsangular-materialgithub-pages

change md-tabs button height

I want to change my tab button to be small/thinner. and I go through the DOM for all of the pointers for the css such as:

md-tabs-canvas.md-center-tabs{
height: 10px;
}
md-tabs-wrapper{height: 10px;}
md-pagination-wrapper{height: 3px;}

but I can't got the height I want. Or something I need to do with the ng-isolate-scope CSS like rearranges the proposition of this pointer?

update

This is code from code pen http://codepen.io/tom031/pen/EZZweq

This is code in production https://tom031.github.io/

Solution

  • Updates:

    I tried to change the padding of md-tab-item on your GitHub page, and it works. See it in the screenshot: screenshot. It is the padding of md-tab-item that makes the elements bigger.

    Change the css to this:

    md-pagination-wrapper {
    height: 30px;
}
md-tab-item {
    padding: 5px !important;
}