CODEWITHSUNDEEP
reactjsmaterial-ui
Andrés Montoya
Andrés Montoya

Reputation: 4427

Material UI - Button doesn't work over another component

The button has the following style: 

floatButton: {
    position: 'fixed',
    bottom: theme.spacing.unit * 2,
    right: theme.spacing.unit * 2
}

And the button component looks like:

<Button
  className={classes.floatButton}
  variant="fab"
  color="secondary"
  onClick={this.handleHideElement}
>
  <AddIcon />
</Button>

The problem happens when the browser windows is small and a I can't click the button:

enter image description here

For some reason the button is a little transparent and the onClick function doesn't work.

How can i resolve this?

Thank you.

Upvotes: 2

Views: 1691

Answers (2)

Esteban
Esteban

Reputation: 170

Just to provide an example of what Dylan said:

  <Button
    style={{zIndex: 100}}
    variant="contained">Button text
  </Button>

Upvotes: 0

Dylan
Dylan

Reputation: 343

Try giving the button a higher z-index than everything else. That should make it clickable and get rid of the transparency.

Upvotes: 2

Related Questions