search

teodosii / react-notifications-component

Delightful and highly customisable React Component to notify your users
https://teodosii.github.io/react-notifications-component/
MIT License
1.27k stars 73 forks source link

Width is not working as expected on notifications positioned at center #108

Closed BeroBurny closed 2 years ago

BeroBurny commented 3 years ago

property width provided in addNotificitaion is not working on property container properties top-center, center and bottom-center

image

Code used to generate notifications from screenshot ```typescript ['top-left', 'top-right', 'top-center', 'center', 'bottom-left', 'bottom-right', 'bottom-center'].forEach(container => { store.addNotification({ title: "Wonderful!", message: "teodosii@react-notifications-component", type: "danger", insert: "top", container: container as ReactNotificationOptions['container'], dismiss: { duration: 10900, }, width: 700, }); }) ```
itsmichaeldiego commented 3 years ago

@teodosii I am experiencing the same issue. I did some investigation and it seems you've set a max-width: 350px in all the centered positions indeed:

.notification-container--bottom-center, .notification-container--center, .notification-container--top-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    left: calc(50% - 175px);
    max-width: 350px;
}

This could be fixed like so:

    left: 50%;
    transform: translate(-50%, 0);
    min-width: 350px;
teodosii commented 2 years ago

Fixed in 3.1.0, it was using width: 100% for centered containers instead of the supplied width.