Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Problem when setting high width. #67

Closed
DiegoDevBittencourt opened this issue May 3, 2020 · 3 comments
Closed

Problem when setting high width. #67

DiegoDevBittencourt opened this issue May 3, 2020 · 3 comments
Labels
bug Something isn't working

Comments

@DiegoDevBittencourt
Copy link

DiegoDevBittencourt commented May 3, 2020

Sup guys! So this is my code:

import { store } from 'react-notifications-component';

import 'react-notifications-component/dist/theme.css'
import 'animate.css'

export default Notification = {

  dangerNotification: function (message) {

    store.addNotification({
      message: message,
      type: "danger",
      insert: "top",
      container: "top-right",
      animationOut: ["animated", "fadeOut"],
      width: 600,
      dismiss: {
        duration: 4000,
        onScreen: true,
        showIcon: true,
      },
    });
  }
}

And this is how the notification appears on my screen:

not2

I want that the notification appears like this:

not1

But bigger, the problem is that when I change the width size to 350+ it will cut the right edge. So, how can I fix this? Also the <ReactNotification /> are inside my <app/> component in root.

@teodosii
Copy link
Owner

Hey, could you please post a gif to illustrate this issue? The container should be properly placed and the notification should take width accordingly to the container.
@DiegoBittencourtOfficial

@teodosii teodosii added the bug Something isn't working label Aug 18, 2020
@DiegoABittencourt
Copy link

@teodosii here it go:
ezgif-2-6786c93cb540

@teodosii
Copy link
Owner

Containers have changed in 3.0.0 and are quite dynamic in terms of width. Fixed in 3.0.0

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants