Tabs navigation bar hides elements beneath it - reactjs

Question

I'm using material-ui to write a navigation bar by using Tab. My tab navigation bar is almost the same as Master.jsx:
import React from 'react';
import {
AppCanvas,
IconButton,
EnhancedButton,
Mixins,
Styles,
Tab,
Tabs,
Paper} from 'material-ui';
const {StylePropable} = Mixins;
const {Colors, Spacing, Typography} = Styles;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;
const Master = React.createClass({
mixins: [StylePropable],
getInitialState() {
let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme);
// To switch to RTL...
// muiTheme.isRtl = true;
return {
muiTheme,
};
},
propTypes: {
children: React.PropTypes.node,
history: React.PropTypes.object,
location: React.PropTypes.object,
},
childContextTypes: {
muiTheme: React.PropTypes.object,
},
getChildContext() {
return {
muiTheme: this.state.muiTheme,
};
},
getStyles() {
let darkWhite = Colors.darkWhite;
return {
footer: {
backgroundColor: Colors.grey900,
textAlign: 'center',
},
a: {
color: darkWhite,
},
p: {
margin: '0 auto',
padding: 0,
color: Colors.lightWhite,
maxWidth: 335,
},
github: {
position: 'fixed',
right: Spacing.desktopGutter / 2,
top: 8,
zIndex: 5,
color: 'white',
},
iconButton: {
color: darkWhite,
},
};
},
componentWillMount() {
let newMuiTheme = this.state.muiTheme;
newMuiTheme.inkBar.backgroundColor = Colors.yellow200;
this.setState({
muiTheme: newMuiTheme,
tabIndex: this._getSelectedIndex()});
let setTabsState = function() {
this.setState({renderTabs: !(document.body.clientWidth <= 647)});
}.bind(this);
setTabsState();
window.onresize = setTabsState;
},
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({
tabIndex: this._getSelectedIndex(),
muiTheme: newMuiTheme,
});
},
render() {
let styles = this.getStyles();
let githubButton = (
<IconButton
iconStyle={styles.iconButton}
iconClassName="muidocs-icon-custom-github"
href="https://github.com/callemall/material-ui"
linkButton={true}
style={styles.github} />
);
let githubButton2 = (
<IconButton
iconStyle={styles.iconButton}
iconClassName="muidocs-icon-custom-github"
href="https://github.com/callemall/material-ui"
linkButton={true}/>
);
return (
<AppCanvas>
{githubButton}
{ this._getTabs() }
{this.props.children}
</AppCanvas>
);
},
_getTabs() {
let styles = {
root: {
backgroundColor: Colors.cyan500,
position: 'fixed',
height: 64,
top: 0,
right: 0,
zIndex: 1101,
width: '100%',
},
container: {
position: 'absolute',
right: (Spacing.desktopGutter / 2) + 48,
bottom: 0,
},
span: {
color: Colors.white,
fontWeight: Typography.fontWeightLight,
left: 45,
top: 22,
position: 'absolute',
fontSize: 26,
},
svgLogoContainer: {
position: 'fixed',
width: 300,
left: Spacing.desktopGutter,
},
svgLogo: {
width: 65,
backgroundColor: Colors.cyan500,
position: 'absolute',
top: 20,
},
tabs: {
width: 425,
bottom: 0,
},
tab: {
height: 64,
},
};
const materialIcon =
<EnhancedButton
style={styles.svgLogoContainer}
linkButton={true}
href="/#/home">
<img style={this.prepareStyles(styles.svgLogo)} src="images/material-ui-logo.svg"/>
<span style={this.prepareStyles(styles.span)}>material ui</span>
</EnhancedButton>
return (
<div>
<Paper
zDepth={0}
rounded={false}
style={styles.root}>
{materialIcon}
<div style={this.prepareStyles(styles.container)}>
<Tabs
style={styles.tabs}
value={this.state.tabIndex}
onChange={this._handleTabChange}>
<Tab
value="1"
label="GETTING STARTED"
style={styles.tab}
route="/get-started" />
<Tab
value="2"
label="CUSTOMIZATION"
style={styles.tab}
route="/customization"/>
<Tab
value="3"
label="COMPONENTS"
style={styles.tab}
route="/components"/>
</Tabs>
</div>
</Paper>
</div>
);
},
_getSelectedIndex() {
return this.props.history.isActive('/get-started') ? '1' :
this.props.history.isActive('/customization') ? '2' :
this.props.history.isActive('/components') ? '3' : '0';
},
_handleTabChange(value, e, tab) {
this.props.history.pushState(null, tab.props.route);
this.setState({tabIndex: this._getSelectedIndex()});
},
});
export default Master;
Basically I removed AppBar, AppLeftNav and FullWidthSection.
The only problem is that the Tabs hides some elements beneath it, see the picture below:
I must did something wrong, any ideas? Thanks!

Answer 1

Your root style is fixed. It will cause the element to stick on the top. Remove it.

Answer 2

OK, I found paddingTop: Spacing.desktopKeylineIncrement + 'px', in page-with-nav.jsx, which is the right solution.
The reason the elements beneath the navigation tab is covered is because fixed position elements are removed from the document flow and do not take up any space. So the elements are beginning at the top as if the header isn't there. What you have to do is use padding or margin to take up the space that would have been occupied by your header if it was in the normal flow.