Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Close button is showing along with text #90

Open
Sandip124 opened this issue Oct 27, 2021 · 4 comments · May be fixed by #93
Open

Close button is showing along with text #90

Sandip124 opened this issue Oct 27, 2021 · 4 comments · May be fixed by #93

Comments

@Sandip124
Copy link
Contributor

image

the close icon should be sticked to the right side according to the position , otherwise it is very difficult to find th close button when having long text of exception.
@apvarun
Copy link
Owner

apvarun commented Oct 27, 2021

@Sandip124 Can you share the toastify config for this toast?

@neeraj-singh-spar
Copy link

I have same issue as in the screenshot above. With following config

        Toastify({
          text: notification,
          duration: -1,
          close: true,
          escapeMarkup: false,
          gravity: "top", // `top` or `bottom`
          position: "right", // `left`, `center` or `right`
          stopOnFocus: true, // Prevents dismissing of toast on hover
          // className: "info",
          style: {
            background: "#32abdc",
          },
          offset: {
            x: 4, // pixels
            y: 48,
          },
          onClick: function () {
            document.querySelector("#internal-chat-modal").click();
          }, // Callback after click
        }).showToast();

@Sandip124 Sandip124 linked a pull request Dec 3, 2021 that will close this issue
Open
@cyonii
Copy link

cyonii commented Jan 1, 2022

I had this issue too so I positioned the close icon absolute to it's toast container.

.toast-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  background-color: $white;
  line-height: 1;
  opacity: 1;
}

Screen Shot 2022-01-01 at 2 31 58 PM

It would be nice to have an option to position the close icon absolutely, with options like below:

Toastify({
  closePosition: "top right" // `top left`, `bottom left`, `bottom right`
}).showToast()

@Sandip124
Copy link
Contributor Author

@cyonii that would be a nice addition also all theming and option cannot be directly implemented in a core library.
for this toaster library we can add something like theme and that would be injected to it for designing in any way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix : alignment for avatar and close icon. Sandip124/toastify-js
4 participants
@apvarun @Sandip124 @cyonii @neeraj-singh-spar