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;
}