Close button is showing along with text

[Sandip124]

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]

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

[neeraj-singh-spar]

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();

[cyonii]

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;
}

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]

@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.