Material-ui: [Tabs] TabTemplate to use 100% height

Created on 31 Aug 2016 · 5Comments · Source: mui-org/material-ui

When you use the default tab template as part of Tabs the styling in the code uses 100% width, but no 100% height. Meaning if you then want all your other components to get the height allocated under the tab template div you can't get at it when you use 100% height for children under the tab template div.

Steps to reproduce

Simply create a tab and add some child to the tab (set the height property to 100% of the child - the height of div up till the template is correct, but then the child div can't the height.

Versions

Material-UI: 0.15.3
React: 15.3.0
Browser: Chrome / Safari

Any help would be appreciated.

Regards,

Mustafa

Tabs

Source

mustafa-visokio

Most helpful comment

This is a fairly common issue with the tabs component. Maybe the docs could be improved a little? The tabTemplate prop is described like this:

Override the default tab template used to wrap the content of each tab element.

I think this is a little vague. linking to the default tab template could be a great start. Adding a little info about the default tab template's implementation would be nice too.

However, overriding the component that changes the visibility of the tab might be an overkill for these kind of problems, not to mention error prone. Why not have a new prop called tabTemplateStyle that could be used to add height: 100% to the template style? I could work on a PR for this feature if you guys are interested :)

GAumala on 28 Sep 2016

👍5

All 5 comments

I used this solution #2085, it worked for me

boukensj on 5 Sep 2016

Hiya, thanks will give it a go, very much appreciated.

mustafa-visokio on 6 Sep 2016

This is a fairly common issue with the tabs component. Maybe the docs could be improved a little? The tabTemplate prop is described like this:

Override the default tab template used to wrap the content of each tab element.

I think this is a little vague. linking to the default tab template could be a great start. Adding a little info about the default tab template's implementation would be nice too.

GAumala on 28 Sep 2016

👍5

It would be great if we could specify the style of template and gets my vote ;)

mustafa-visokio on 28 Sep 2016

An initial migration of the Tabs component has been merged on the next branch.
The component is much simpler, the TabTemplate one was removed. I'm closing this issue.
It's now up to user to handle the views they display. We may provide an helper in the future.
If you find a workaround for the master branch. We would still accept a PR for it 👍 .
Thanks.