Material UI Collapse is taking space when hidden

user_14713436 0
Viewed 660

I am using Material UI Collapse with react and it is giving extra space on the UI when it is hidden

<Collapse in={false}>
       //something here
</Collapse>

I have not applied any CSS, But is giving some default CSS like

element.style {
    min-height: 0px;
}
.MuiCollapse-hidden {
    visibility: hidden;
}
.MuiCollapse-container {
    height: 0;
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

I am facing this issue because I have applied align-items:"center" on the parent and the other elements are not center aligned because it is taking some space even when hidden

material-ui css
1 Answers

To solve this problem, you simply need to add a prop called unmountOnExit. This means that it would make that item have a display of none. Here yours has a visibility of hidden.

<Collapse in={false} unmountOnExit> //something here </Collapse>

user_128767610
Related