CODEWITHSUNDEEP
angularjsangular-material
Sohan Shirodkar
Sohan Shirodkar

Reputation: 520

Why does md-tab-body not span full length of the screen

I am trying to implement tabs in AngularJS using Angular Material.

I have some tabs. On clicking over a tab, the content specific to that tab should be displayed. But the problem I am facing is that, the content of that tab doesn't occupy the full device length.

<md-tabs md-selected="selectedIndex">
    <md-tab md-on-select="onTabSelected(tab)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled">
        <md-tab-label>
            <p>Tab A</p>
        </md-tab-label>
        <md-tab-body>
            <p>Content of tab A</p>
            <div infinite-scroll="loadMore(tab.id)" infinite-scroll-disabled="busy">
                <div ng-repeat="p in products">
                    <div class="well">
                        <h3>{{p.id}}</h3>
                        <h5>{{p.cat_id}}</h5>
                    </div>
                </div>

                <div ng-show="busy">Loading more products....</div>

            </div>
        </md-tab-body>
    </md-tab>
</md-tabs>

"md-tab-body" directive specifies the tab content.

In the above code, I just intend to implement ng-Infinite scroll as a part of tab content. But somehow, tab content occupies only a part of the page length. Is there any solution by which I can make the tab content occupy full length of the page.

Upvotes: 3

Views: 1850

Answers (1)

Sohan Shirodkar
Sohan Shirodkar

Reputation: 520

I am not sure if there are any other solutions for this problem, but the simplest one is to use md-dynamic-height attribute on md-tabs directive.

<md-tabs md-dynamic-height>
.....
</md-tabs>

This is all that you need!

Upvotes: 4

Related Questions