How to move material ui tabs below my content and have the content expand to full height?

2
votes

I am using tabs from Material UI tabs (https://material.angular.io/components/tabs/overview). How do I make it so that my tabs are below the content area?

<md-tab-group>
    <md-tab label="Tab 1">
        Content
    </md-tab>            
    <md-tab label="Tab 2">
        Content
    </md-tab>
</md-tab-group>

I tried putting the following on md-tab-group, but it appeared to have to effect:

md-tabs-align="bottom"

I would also like the tab content to fill up the entire div instead of just being sized to the small amount of text I have.

2
htmlcssangularangular-material2
AFAIK there's no input called "align" in md-tab. See if position property is what you're looking for. - developer033
it may not be in the documentation, but according to this, it looks like there should be a way to align to the bottom github.com/angular/material/issues/5432, though it is not working for me. - Rolando
It's related to Material (1) not Material2. - developer033
See if this question helps. - developer033
md-align-tabs="bottom" works with material design for angular js. For Material 2 you need to use headerPosition="below". - Lambo14

2 Answers

0
votes

You can do it easily using CSS3 flex-box.

mat-tab-group{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

Check the image

0
votes

This is, i believe, a better solution which uses built-in Inputs:

Material Design 2 Tabs aligned at bottom bottom

--- From that link ---

The Tabs section of the component demo site references the following in the API Reference section

@Input()            | Position of the tab header.
headerPosition      |

After looking through the source I found the following:

/** Possible positions for the tab header. */
export type MdTabHeaderPosition = 'above' | 'below';

Thus, the following worked for me

<md-tab-group headerPosition="below"> 
  <md-tab label="Tab One"> 
     Tab One Contents 
  </md-tab> 
  <md-tab label="Tab Two"> 
    Tab Two Contents 
  </md-tab> 
</md-tab-group>