Material-ui: Snackbar enter from the top

Created on 7 Jul 2016 · 6Comments · Source: mui-org/material-ui

Has anyone tried getting the snackbar to enter from the top? I can easily change the style attribute to have:

style: {top: 0, height: 50}

Unfortunately I have no idea how to override the motion to go down instead of up. Would love some help. Thanks!

Source

stueynet

👍3

Most helpful comment

If someone is needing this, I just neded to add this style to make it appear from top:

style={{
    top: 0,
    bottom: 'auto',
    left: (window.innerWidth - 288) / 2,
    transform: this.props.errorMessage ?
        'translate3d(0, 0, 0)' :
        `translate3d(0, -50px, 0)`
}}

marco-lavagnino on 8 Mar 2017

👍13

All 6 comments

Have you tried adding transform: 'translate3d(0px, -50px, 0px)' to your style object?

BeSports on 7 Jul 2016

@BeSports yeah and that keeps it up there above the screen. How would I set it so that it drops in and goes back up?

stueynet on 7 Jul 2016

So this is almost working, however it does not slide in

const styles = {
    messageStyle: {color: '#441F4B'},
    bodyStyle: {backgroundColor: '#e7dfdd'},
    style: {
        top: 0,
        bottom: 'auto',
        backgroundColor: '#e8dfdd',
        width: '100%',
        maxWidth: 'none',
        transform: this.state.alert.show ?
            'translate3d(0, 0, 0)' :
            `translate3d(0, -50px, 0)`
    }
};

stueynet on 7 Jul 2016

If someone is needing this, I just neded to add this style to make it appear from top:

style={{
    top: 0,
    bottom: 'auto',
    left: (window.innerWidth - 288) / 2,
    transform: this.props.errorMessage ?
        'translate3d(0, 0, 0)' :
        `translate3d(0, -50px, 0)`
}}

marco-lavagnino on 8 Mar 2017

👍13

shouldn't this be a feature?

edit: just found this https://github.com/callemall/material-ui/issues/5437