cssmaterial-uisplitpane

Material UI Fab Button stays under left split-pane

How can I make the Fab button totally visible? Left half of it is always under left pane. Tried to increase z-index, but didn't work.

codesandbox

        <UpperPane>
          <Fab
            style={{
              position: "absolute",
              left: "-25px",
              zIndex: 999
            }}
            color="primary"
            aria-label="add"
          >
            <AddIcon />
          </Fab>
        </UpperPane>
Solution

  • Modify CSS properties and it will work -

     style={{
          left: "-25px"
       }}

const UpperPane = styled.div`
  height: 100%;
  width: 100%;
  position:fixed; // add this property
  background-color: yellow;
`;

    enter image description here

    Working sandbox here - https://codesandbox.io/s/splitpane-rqenw?file=/demo.tsx