I want the menu to give height 100%. If the elements in the page increases vertically then with respect to the page length the menu-height will also be increasing. I have used "height:100%" in the styles but it's not working.
Any help??
I have the following code:
import React, { Component } from 'react';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import './mystyle.css';
const mainmenu = {
width: '180px',
height: '100%',
};
class MenuView extends Component {
render() {
return (
<div className="dash-menuview">
<Menu style={mainmenu} className="mydashboard">
<MenuItem primaryText="My Name" style={{color:'white'}} href="#/name" onClick={handlers.changeURL}/>
<MenuItem primaryText="Personal Information" style={{color:'white'}} href="#/information" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Address" style={{color:'white'}} href="#/current" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.logout}/>
</Menu>
</div>
);
}
}
export default MenuView;
mystyle.css
.dash-menuview {
margin-left: -8.8%;
}
.mydashboard a {
color: #FFFFFF;
text-decoration: none;
}
You can use height: 100vh
like below code, where I just put a sample output of you code.
.dash-menuview {
margin-left: 0;
background :#444;
height: 100vh;
}
.mydashboard a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
<div class="dash-menuview">
<Menu class="mydashboard">
<a href="#">My Name</a>
<a href="#">Personal Information</a>
<a href="#">My Address</a>
<a href="#">My Files</a>
</Menu>
</div>
You can also check this Fiddle. Hope it's helpful.