Material-ui: [IconMenu] zIndex issue

[caseychoiniere]

The zIndex on the IconMenu is set to 2100 but unless I set it to at least 5000 it does not show the MenuItems. I tested this on a completely blank page to make sure that there wasn't an issue caused by any other elements on the page. I can see that when the icon button is clicked it renders the MenuItems in a div with a zIndex of 2100 but it doesn't show. I can change the zIndex in chrome dev tools and the MenuItems start showing at a zIndex of 5000. I tried overriding the zIndex with the IconMenu style prop but this doesn't seem to work.
I'm using React v0.14.0 and just upgraded to Material-UI v0.14.2. I wasn't having this issue until I upgraded.
Any idea what is causing this? Thanks.

My code

<IconMenu iconButtonElement={<IconButton iconClassName="material-icons">more_vert</IconButton>}>
                    <MenuItem primaryText="Delete Folder" leftIcon={<i className="material-icons">delete</i>} onTouchTap={this.handleTouchTapDelete.bind(this)} style={styles.dropDown}/>
                    <MenuItem primaryText="Edit Folder" leftIcon={<i className="material-icons">mode_edit</i>} onTouchTap={this.handleTouchTapEdit.bind(this)} style={styles.dropDown}/>
                </IconMenu>

var styles = {
    dropDown: {
        zIndex: '9999'
    }
}

[caseychoiniere]

Some pics for reference

[caseychoiniere]

I checked and I'm having the identical issue with DropDowns as well.

[c0b41]

problem this line https://github.com/callemall/material-ui/blob/master/src/styles/zIndex.js#L9 maybe custom theme add zindex example: http://www.material-ui.com/#/customization/themes

or

zIndex: '9999 !important'

[newoga]

@caseychoiniere That's interesting. I copied your example and I'm not currently having that problem in my project on 0.14.2. @ayhankuru is right that you can globally change the zIndex for the component by adjusting your theme, but I wonder if there is something else wrong that we need to investigate.

Did you try/test across different browsers/environments? Can you try copying your IconMenu component in a simpler higher level component?

[caseychoiniere]

@newoga I've tried in Chrome and Firefox and had the identical issue. I've copied my IconMenu into a simple page component with no other components to make sure that it wasn't another component on the page that was interfering with it. Perhaps it's something else in my project that is causing the problem. I'll look at setting custom zIndex for now in my theme. I would say that if nobody else can replicate this issue it might be an issue with my other app dependencies and material-ui together. I'll investigate further. Thanks @ayhankuru and @newoga for the tips.

[newoga]

Interesting, okay let me know what you find. If you end up creating a simple example and you can put up on git or zip it up an email I can take a closer look.

[lixunn]

I've got this issue too!

and here is my dependencies:

"dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "material-ui": "^0.14.3"
}

[caseychoiniere]

My dependencies

"dependencies": {
    "material-ui": "^0.14.2",
    "react": "^0.14.0",
    "react-router": "^0.13.2",
    "react-cookie": "^0.3.4",
    "reflux": "^0.2.7"
  },

[caseychoiniere]

Also, can't seem to globally change the zIndex for the component by adjusting my theme. I've tried both creating a custom zIndex.js script and importing it like so

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from './zIndex';

export default {
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: "#303F9F",
        primary2Color: "#3F51B5",
        primary3Color: "#C5CAE9",
        accent1Color: "#448AFF",
        accent2Color: "#ED2B2B",
        accent3Color: "#F58C8C",
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
};

and just adding an object like so

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';

export default {
    spacing: Spacing,
    zIndex: {
        menu: 1000,
        appBar: 1100,
        leftNavOverlay: 1200,
        leftNav: 1300,
        dialogOverlay: 1400,
        dialog: 1500,
        layer: 2000,
        popover: 5000,
        snackbar: 2900,
        tooltip: 3000
    },
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: "#303F9F",
        primary2Color: "#3F51B5",
        primary3Color: "#C5CAE9",
        accent1Color: "#448AFF",
        accent2Color: "#ED2B2B",
        accent3Color: "#F58C8C",
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
};

And neither one works. The docs aren't very clear how to do this. The only thing that seems to work is actually changing the value in the node module itself. Interestingly, even if I don't link to the node module in my custom theme and I make the change to node_modules/material-ui/lib/styles/zIndex.js and then run my gulp build it changes the zIndex. Leads me to believe that the zIndex can't be changed from a custom theme. Kind of stumped on this. Perhaps I'm missing something obvious here?

[oliviertassinari]

And neither one works. The docs aren't very clear how to do this.

I couldn't agree more. The docs for the theme isn't great :grin:.
We have moved the zIndex out of the base thème. You can use the second parameter of getMuiTheme to provide it.

[caseychoiniere]

Thanks, I'll give that a shot. I'm having the same zIndex issues with dropdown as well. Which is interesting because I believe it also uses the popover.

[caseychoiniere]

To be clear about using the second parameter of getMuiTheme to provide zIndex do you mean like this? And then removing it from my custom theme page? Because that still seems to be grabbing the value from zIndex.js in node modules.
Thanks for all your help, MUI is pretty awesome.

let zIndex = {
        menu: 1000,
        appBar: 1100,
        leftNavOverlay: 1200,
        leftNav: 1300,
        dialogOverlay: 1400,
        dialog: 1500,
        layer: 2000,
        popover: 5000,
        snackbar: 2900,
        tooltip: 3000
    };

class App extends React.Component {
    constructor() {
        this.state = {
            appConfig: MainStore.appConfig
        }
    }

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MyRawTheme, zIndex)
        };
    }

[caseychoiniere]

I also tried

getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MyRawTheme, {zIndex: {$set: zIndexObj}})
        };
    }

And neither works for me.

[caseychoiniere]

@lionrock any luck or fixes on your end?

[oliviertassinari]

@caseychoiniere Have a look at the example of this section http://www.material-ui.com/#/get-started/server-rendering.

[caseychoiniere]

So, here's the solution. I was very close yesterday but was using the wrong syntax for the second parameter of getMuiTheme. Hope this helps others if they need to override the zIndex values in the node module.

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import MyRawTheme from '../theme/customTheme.js';
let zIndex = {
    zIndex: {
        popover: 5001,
        layer: 5000
    }
};

class App extends React.Component {
    constructor() {
        this.state = {
            appConfig: MainStore.appConfig
        }
    }

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MyRawTheme, zIndex)
        };
    }

@lionrock maybe this helps you.

[lixunn]

@caseychoiniere I've fixed this issue just by the initial code below 😂:

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

[caseychoiniere]

@lionrock I see, then you had a completely different problem. I already included that code in my app. My issue started after upgrading from an older version of material-ui and has to do with zIndex, not the tap event plugin. I believe the guys are working on implementing this tap event code directly into all components that require it.

[pbhisay]

@caseychoiniere , your solution worked out for me.

Issue I was facing was, I added a 'select field' inside of a drop down menu, so clicking on select field would create another pop-up and it would pop behind the drop down menu. I only had to switch the values you'vegiven, but it worked! Thanks!