Material: [md-tabs] [md-toolbar] - tab's content is pushed behind toolbar

Created on 31 Dec 2014 · 7Comments · Source: angular/material

Hello,

Please see this Plunker

Tabs' buttons inside the toolbar.
Tabs' content is outside of the toolbar.

Notice that the content in second tab, which has a list of items is pushed up and the "item-0" is not visible when it should be.

Source

DmitryEfimenko

Most helpful comment

@Charlie-Ng This could help you:

Even if a bit awful, I've achieved toolbar with tabs + view with tabpanels (including animation) with md-tabs md-selected directive, and another md-tabs where I want to show the panels, using the same model as in the previous one but hiding the _md-tabs md-tabs-wrapper_ via CSS:

<md-toolbar>
    <md-tabs md-selected="currentTab">
        <md-tab id="tab1" aria-controls="tab1-content">Tab One</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">Tab Two</md-tab>
    </md-tabs>
</md-toolbar>
<md-tabs md-dynamic-height md-selected="currentTab" class="noTabPanel">
    <md-tab label="Tab One">
        <md-content>
        Content of Tab One.
        </md-content>
    </md-tab>
    <md-tab label="Tab Two">
        <md-content>
        Content of Tab Two.
        </md-content>
    </md-tab>
</md-tabs>

md-tabs.noTabPanel md-tabs-wrapper {
    display: none !important;
}

Example:

The problem being that it could be confusing for users with screen readers, because setting aria-hidden to the tabs we don't want to show would render its contents unreachable to those users.

Sithdown on 27 Jul 2015

👍4

All 7 comments

@DmitryEfimenko - you need to use:

<body layout="column"> and
<md-content layout-padding flex>

body layout="column" ng-controller="HomeController" layout="column">
  <md-toolbar>
    <div class="md-toolbar-tools">
        <h1>Title</h1>
        <span flex></span>
        <span>S</span>
    </div>
    <md-tabs md-selected="tabs.selectedIndex">
        <md-tab id="tab1" aria-controls="tab1-content">Tab 1</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">Tab 2</md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">Tab 3</md-tab>
    </md-tabs>
</md-toolbar>

<md-content layout-padding flex>
    <ng-switch on="tabs.selectedIndex" class="tabpanel-container">
        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
            View for Item #1<br />
            data.selectedIndex = 0
        </div>

        <div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">        
            <md-item ng-repeat="brand in brands">
                <md-item-content>
                    <div class="md-tile-left">
                        <img ng-src="" alt="{{brand.name}}" />
                    </div>
                    <div class="md-tile-content">
                        {{brand.name}}
                    </div>
                </md-item-content>
            </md-item>
        </div>

        <div role="tabpanel" id="tab3-content" aria-labelledby="tab3" ng-switch-when="2" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
            View for Item #3<br />
            data.selectedIndex = 2
        </div>
    </ng-switch>
</md-content>

</body>

ThomasBurleson on 6 Jan 2015

👍3

Adding this to the md-tab docs would be totally sweet.
the relationship between md-toolbar, md-content and md-tab is not immediately apparent, and this example makes it really clear.

ratfoot on 30 Jan 2015

👍2

@ThomasBurleson Is there a way to use the solution you posted but keeping the slide animations when the selected tab changes?

Sithdown on 25 Jul 2015

+1 Same question as Sithdown.

I want to keep md-dymanic-height in md-tabs but I also want only the content is scrollable, not including the tabs.
Using the md-toolbar seems fixing the problem, but the animations will be gone.

Charlie-Ng on 26 Jul 2015

@Charlie-Ng This could help you:

<md-toolbar>
    <md-tabs md-selected="currentTab">
        <md-tab id="tab1" aria-controls="tab1-content">Tab One</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">Tab Two</md-tab>
    </md-tabs>
</md-toolbar>
<md-tabs md-dynamic-height md-selected="currentTab" class="noTabPanel">
    <md-tab label="Tab One">
        <md-content>
        Content of Tab One.
        </md-content>
    </md-tab>
    <md-tab label="Tab Two">
        <md-content>
        Content of Tab Two.
        </md-content>
    </md-tab>
</md-tabs>

md-tabs.noTabPanel md-tabs-wrapper {
    display: none !important;
}

Example:

The problem being that it could be confusing for users with screen readers, because setting aria-hidden to the tabs we don't want to show would render its contents unreachable to those users.

Sithdown on 27 Jul 2015

👍4

well that's lame and lazy! seriously?!?! How about add some additional properties to a directive to allow tab labels to be clicked outside of tabs

secretgspot on 22 Nov 2015

👍1

@Sithdown thanks for sharing your solution! That worked great for me. I am now able to have my tab content elsewhere on the page than my tab headers.