Horizontal Menu CSS Material UI ReactJS

Question

I am trying to do a horizontal menu with ReactJS and Material UI, but I have the following problem: My menu shows correctly, in horizontal, but it is not responsive. When I change the size of the page in the browser, my menu continues to have the same size like before. It only updates its size when I reload with F5.

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';

const style = {
  display: 'inline-block',
  margin: '0 32px 16px 0',
  width: '100%'
};

const styleq = {
  display: 'inline',
  float: 'left',
  width: '25%'
};

export default class MenuAlumno extends React.Component {
render() {
    return (
        <div>
            <AppBar
                title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -</span>}
                onTitleTouchTap={this.handleTouchTap}
                titleStyle={STYLES.titleStyle}
                iconElementLeft={this.state.drawerOpen ?  <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
                onLeftIconButtonTouchTap={this.controlMenu}
            />
            <Paper style={style}>
              <Menu>
                <MenuItem primaryText="Maps"  style={styleq}/>
                <MenuItem primaryText="Books"  style={styleq}/>
                <MenuItem primaryText="Flights" style={styleq} />
                <MenuItem primaryText="Apps" style={styleq} />
              </Menu>
            </Paper>
        </div>
    );
}
}

mikem · Accepted Answer · 2017-04-26 03:37:14Z

3

I had this same question and it has been driving me crazy! lol. I love MUI, but sometimes all the nesting can make things really difficult... Anyway, this worked for me. Keep your MenuItems as they are and change your Menu props to this:

<Menu autoWidth={false} width="100%" listStyle={{width: '0.01%'}} style={{width:'100%'}}>

answered Apr 26, 2017 at 3:37

mikem

584 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maxgallo · Accepted Answer · 2017-04-23 22:52:10Z

2

You probably have an element with a fixed width.

Is there a URL where to see it working or something that could help me understand what's going on? It's hard just from what you wrote.

UPDATE

When you use the Menu component, set the "autoWidth" props to "false". As you can see from the code, the default is "true" that will force a width for the menu.

<Menu autoWidth={false}>

edited Apr 23, 2017 at 22:52

answered Apr 23, 2017 at 19:11

maxgallo

4783 silver badges14 bronze badges

4 Comments

JuMoGar Over a year ago

It is not my code but is very similar and happen the same that i want to fix. jsfiddle.net/d980vcon/2

maxgallo Over a year ago

Great! You have to set 'width:100%' to both div with id "horiz-menu" and its parent.

JuMoGar Over a year ago

Thank you. I did it, I will answer again due to i can't put code here.

JuMoGar Over a year ago

Thank you for the help. I will answer you in other answer due to I need to put code and a Img.

Collectives™ on Stack Overflow

Horizontal Menu CSS Material UI ReactJS

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related