Tabs height 100%

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

[pnpetrov]

@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]

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

You can override the TabTemplate