feat(md-tabs): md-stretch-height to fill parent element

[gpopovic]

Currently md-tabs offer md-dynamic-height ability which can be nice but ...

Is it possible to somehow force md-tabs to set height to a height of the highest tab ?

[ACDN]

I would agree that md-dynamic-height attribute adds some excellent functionality. However I would like an attribute called: md-layout-fill. Which would instruct md-tabs to fill the entire layout it is in.

The problem I am having is that my tab content is loaded through an ng-include. This sometimes has a delay and if md-dynamic-height calculates before the content is there you'll be looking at nothing or some chopped off content.

Is there another way to instruct md-tabs how to tall it should be in 0.9?

[robertmesserle]

@ACDN I believe this would be accomplished with our layout API.

@gpopovic Not a bad idea, should be fairly easy to implement since the math and logic are already there.

[jakubweber]

+1

[ivks]

+1

[marcramser]

+1

[wollio]

+1

[fdalvi]

+1

[jonrimmer]

@robertmesserle As far as I can tell, it is impossible to use the layout API to accomplish vertically stretched tabs.

See this plunkr: http://plnkr.co/edit/V08Ler8vaZGPaRaurtf9?p=preview

The layout attributes applied cause the tabs control to stretch vertically, and should cause the tabs' content to stretch to fill their parent as well, but this is not what happens.

[jalipert]

+1 There doesn't seem to be any way to get the content of a tab to fill the available space with any combination of layout and flex attributes.

[DomiR]

+1

[shug0]

+1

[DomiR]

Worked with previous versions: http://plnkr.co/edit/V08Ler8vaZGPaRaurtf9?p=preview

[ghost]

+1

[sarod]

:+1:

[mwymann]

+1

[Muttok]

+1

[ruisebastiao]

+1

[bonzanni]

+1

[stevezau]

+1

[jmls]

good grief .. April 2015 ?

Surely we should have had a solution by now. I've spent hours trying to make this work before coming across this issue

[stevezau]

@jmls i also spend hours and hours :)

hope it gets fixed soon

[bonzanni]

I ended up writing some custom css to target the hidden div compiled by the directive. It revolves around applying the styles of the layout-fill class to the hidden div.

It works for my use case, it might help others as well.

http://plnkr.co/edit/CMO1vC3JJlSuYJ0C7p0v?p=preview

[Nezahual]

+1

[Nezahual]

@ThomasBurleson why did you close it? We still can't set a specific height for md-tabs...

[MJRoots]

+1

[nicolac18]

+1

[ThomasBurleson]

@here - we will welcome Pull Request with this enhancement/fix. And we can reopen this issue at that time. Meanwhile, the core team will not work on this.

This issue is closed as part of our ‘Surge Focus on Material 2' efforts. For details, see our forum posting.

[yarsh]

See a (somewhat hacky) solution here: http://stackoverflow.com/questions/30314441/angularjs-material-tab-height-issue/37856853#37856853

[remi-bruguier]

I noticed that manually switching to another tab and then switching back to the previous tab did solve the issue, so I went for that really ugly hack:

$timeout(function(){ 
    ctrl.selectedTab = 1;
    $timeout(function(){
        ctrl.selectedTab = x; // x being the number of the tab you want to reset
    });
});

<md-tabs md-dynamic-height md-selected="ctrl.selectedTab">

It does the trick...

[imjoeco]

@ThomasBurleson I added a md-stretch-height option to fill available space of md-tabs parent element.

[parmarsanjay]

+1

[Splaktar]

Currently waiting for review feedback to be addressed in the PR.

[imjoeco]

@Splaktar You're currently waiting for yourself.