'Slide in Material UI comes from edge of screen

Slide in Material UI transition starts from the edge of the screen, is there any way we can limit the transaction inside card component. I have posted the code below to emphasize the issue. My objective is to ensure that the transition starts and ends within a component boundary

For example in the code below, I would like the transition to start and end within the card Material UI component

import React from 'react';
import Card from '@material-ui/core/Card';
import { IconButton, CardContent, Slide, Paper } from "@material-ui/core";
import { Settings } from "@material-ui/icons"
import { withStyles } from '@material-ui/core/styles'


const styles = {
    card: {
        minWidth: 560,
    },
    cardContent: {
        padding: 8,enter code here
        display: 'flex',
        justifyContent: 'flex-end'
    },
    smallIcon: {
        width: 36,
        height: 36,
        padding: 0,
    },
    paper: {
        width: "400px",
        height: "320px",
        zIndex: 1,
        position: "absolute",
        backgroundColor: "#000000",
        top: "20%",
    }
}

class SimpleCard extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props)
        this.state = {
            gearIconClick: ""
        }
    }
    chartFilterSlider = (evt) => {
        debugger
        var clicked = evt.currentTarget.translate
        console.log("clicked", clicked)
        this.setState({
            gearIconClick: clicked
        })
    }

    render() {
        const { classes, } = this.props
        const { gearIconClick } = this.state
        //console.log("gearIconClick",gearIconClick)
        return (
            <Card className={classes.card}>
                <CardContent className={classes.cardContent} >
                    <IconButton className={classes.smallIcon} onClick={this.chartFilterSlider}>
                        <Settings />
                    </IconButton>
                    {gearIconClick ?
                        <Slide direction="left" in={true} mountOnEnter unmountOnExit>
                            <Paper elevation={4} className={classes.paper}>
                                hello
                           </Paper>
                        </Slide>
                        :
                        <div></div>
                    }
                </CardContent>
                {this.props.children}

            </Card>

        );
    }
}

export default withStyles(styles)(SimpleCard)



Excepted :
 Is there any way we can limit the transaction inside the card component.

Actual output:
Slider in Material UI comes from the edge of the screen
javascriptcssmaterial-ui


Solution 1:[1]

Add overflow: hidden to Card, it should do the job.

Solution 2:[2]

Also you can check the container prop of Slide component: https://mui.com/components/transitions/#slide-relative-to-a-container

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bArmageddon
Solution 2 Alexander Karp

Related Questions