2 replies

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

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'

width: '200px'

on the

<TextFied sx={{ width: '200px' }} />

<TextFied sx={{ width: '200px' }} />

it works, however, setting relative width doesn't work i.e.

<TextField sx={{ width: '80%' }} />

<TextField sx={{ width: '80%' }} />

KP-C

Kevin Powell - Community•3y ago•

2 replies

nookayisee

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

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'

width: '200px'

on the

<TextFied sx={{ width: '200px' }} />

<TextFied sx={{ width: '200px' }} />

it works, however, setting relative width doesn't work i.e.

<TextField sx={{ width: '80%' }} />

<TextField sx={{ width: '80%' }} />

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads