Kevin Powell - Community•6mo ago

relative width not working while animating div collapse using MUI's transition API

I have an input bar that can collapse and expand on onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely.

<ButtonGroup
    sx={{
        justifyContent: 'flex-end',
        alignItems: 'center',
    }}
>
    <Collapse
        in={searchFieldVisible}
        timeout={{ enter: 1000, exit: 1000 }}
        orientation='horizontal'
    >
        <TextField/>
    </Collapse>

    <IconButton onClick={() => setSearchFieldVisible(p => !p)}>
        <SearchIcon />
    </IconButton>

</ButtonGroup>

<ButtonGroup
    sx={{
        justifyContent: 'flex-end',
        alignItems: 'center',
    }}
>
    <Collapse
        in={searchFieldVisible}
        timeout={{ enter: 1000, exit: 1000 }}
        orientation='horizontal'
    >
        <TextField/>
    </Collapse>

    <IconButton onClick={() => setSearchFieldVisible(p => !p)}>
        <SearchIcon />
    </IconButton>

</ButtonGroup>

I am using MUI's transition API . If I set width: '200px' on the <TextFied sx={{ width: '200px' }} /> it works, however, setting relative width doesn't work i.e. <TextField sx={{ width: '80%' }} />

2 Replies

clevermissfox•6mo ago

I’m not familiar with the MUI api, is there a timing function on your transition like ease-in?

MarkBoots•6mo ago

I think it is because it's not possible to transition between width: 0 and width: auto. (a percentage doesnt do anything on an inline element) I don't know mui, but i think the only way is to set a fixed width. (or maybe try setting a max-width which is larger than expected)

Gaming

Programming

relative width not working while animating div collapse using MUI's transition API