Material-UI Menu Height Issue

Question

I want to set the menu height equal to window height by applying css. If the elements in the page increases vertically then with respect to the page length, the menu-height should also be increasing. I have used "height:100%" & also tried using "height: 100vh" 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 {
  background: #545454;
  color: #FFFFFF;
  text-decoration: none;
  color: white;
  margin-left: 0%;
  font-weight: bold;
}

score 1 · Answer 1 · answered Oct 15 '17 at 05:58

1

Try replacing height:100% with height:30 and also assign same height to lineHeight:30

answered Oct 15 '17 at 05:58

Dhaval Jardosh

7,151
5
27
69

It's not working.. read the question carefully.. I want the menu-height to increase automatically whenever the elements in the page increases vertically. As an example, suppose I click on 'Personal Information' and the elements in the page increases and the scroll-bar comes then the menu-height should also be increasing automatically with respect to the window. That's all.. – Subhojit Oct 16 '17 at 05:27
Please provide more information as picture of what you are currently having and what output you want. Also try to add jsfiddle or codepen. – Dhaval Jardosh Oct 16 '17 at 06:45

score 0 · Answer 2 · answered Jul 02 '20 at 02:11

In order to override height styling, you need to use classes api. please refer to link for further specs. In my personal use and also from the code example from Material ui doc, here's some revised example from your code. I used withStyles, and classes to override styling and changed className dash-menuview to dashMenuview (for easier assignment). Hope it helps.

    import React from 'react';
    import PropTypes from 'prop-types';
    import Menu from 'material-ui/Menu';
    import MenuItem from 'material-ui/MenuItem';
    import { withStyles } from '@material-ui/core/styles';
    
    const styles = {
      dashMenuview {
        margin-left: -8.8%,
      },
      mydashboard {
        background: #545454,
        color: #FFFFFF,
        text-decoration: none,
        color: white,
        margin-left: 0%,
        font-weight: bold,
      },
    };
    
    class MenuView extends Component {
         constructor(props){}
         render() {
          { classes } = this.props

            return (
                <div classes={{root: classes.dashMenuview}}>
                   <Menu style={mainmenu} classes={{root: classes.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>
      );
 }
}
    
    ClassesNesting.propTypes = {
      classes: PropTypes.object.isRequired,
    };
    
    export default withStyles(styles)(ClassesNesting);

Material-UI Menu Height Issue

2 Answers2