Search code examples
cssreactjsbuttonmaterial-uiz-index

zIndex -1 on button is making button unclickable

I want to make the button clickable.

enter image description here

Here is the sandbox. https://codesandbox.io/s/m5w3y76mvy

Solution

  • For numberCircle added position: relative; z-index: 1;

    and set mytasks z-index as 0 zIndex: "0" I think it will works.

    Check the overall style

        mytasks: {
    color: "white",
    borderColor: "#2D9CDB",
    backgroundColor: "#2D9CDB",
    borderTopRightRadius: "18px",
    borderBottomRightRadius: "18px",
    borderTopLeftRadius: "18px",
    borderBottomLeftRadius: "18px",
    width: "200px",
    marginLeft: "-35px",
    zIndex: "0" /* changed to 0 */
  },
  numberCircle: {
    borderRadius: "50%",
    behavior: "url(PIE.htc)" /* remove if you don't care about IE8 */,
    width: "15px",
    height: "15px",
    padding: "8px",
    background: "white",
    border: "2px solid #2D9CDB",
    color: "#2D9CDB",
    textAlign: "center",
    font: "16px Arial, sans-serif",
    float: "left",
    zIndex: "1",/* added */
    position: "relative"/* added */
  }