Material-ui: Tabs height 100%

Created on 7 Nov 2015 · 8Comments · Source: mui-org/material-ui

Hello :)

I want my Tab's element (Tab, the Tabs children) to be at height: 100%; overflow-y: auto; when they are active but I cant make it work with the style={{height: "100%"; overflowY: "auto";}} on the Tab element.

Can you help me with this ?
Thanks

enhancement

Source

VinceBT

👍3

Most helpful comment

@binarykitchen you can try something like that

class TabTemplate extends React.Component {
    render() {
        if (!this.props.selected) {
            return null;
        }

        return this.props.children;
    }
}

class TestComponent extends React.Component {
    get styles() {
        return {
            root: {
                flex: '1 1 100%',
                minHeight: 0,
                display: 'flex',
                flexDirection: 'column'
            },
            container: {
                flex: '1 1 100%;',
                display: 'flex',
                flexDirection: 'column',
                overflowY: 'auto'
            }
        };
    }

    render() {
        return (
            <Tabs
                style={this.styles.root}
                contentContainerStyle={this.styles.container}
                tabTemplate={TabTemplate}
            >
                <Tab label="tab1"></Tab>
                <Tab label="tab2"></Tab>
            </Tabs>
        );
    }
}

pnpetrov on 10 Jun 2016

👍5

All 8 comments

@nathanmarks Why has it been closed? height: 100% and overflow does not work on tabs.

cristiano-belloni on 6 May 2016

Same here, wondering how I can adjust tab/tabs height ...

binarykitchen on 9 Jun 2016

Same here, wondering how I can adjust tab/tabs height ...

You can override the TabTemplate

pnpetrov on 9 Jun 2016

👎4

@nikolovp thanks for pointing to templates but i have no idea how to modify and apply them. also searched for documentation or examples but found none. can you give me some clues?

binarykitchen on 10 Jun 2016

@binarykitchen you can try something like that

class TabTemplate extends React.Component {
    render() {
        if (!this.props.selected) {
            return null;
        }

        return this.props.children;
    }
}

class TestComponent extends React.Component {
    get styles() {
        return {
            root: {
                flex: '1 1 100%',
                minHeight: 0,
                display: 'flex',
                flexDirection: 'column'
            },
            container: {
                flex: '1 1 100%;',
                display: 'flex',
                flexDirection: 'column',
                overflowY: 'auto'
            }
        };
    }

    render() {
        return (
            <Tabs
                style={this.styles.root}
                contentContainerStyle={this.styles.container}
                tabTemplate={TabTemplate}
            >
                <Tab label="tab1"></Tab>
                <Tab label="tab2"></Tab>
            </Tabs>
        );
    }
}

pnpetrov on 10 Jun 2016

👍5

many thanks! :)

binarykitchen on 13 Jun 2016

super helpful. if anyone else uses this, just note that the small typo in the flex styles: there shouldn't be a ; at the end.