Code Monkey home page Code Monkey logo

Comments (4)

Sandip124 avatar Sandip124 commented on August 11, 2024 1

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

from toastify-js.

apvarun avatar apvarun commented on August 11, 2024

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

from toastify-js.

neeraj-singh-spar avatar neeraj-singh-spar commented on August 11, 2024

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

from toastify-js.

cyonii avatar cyonii commented on August 11, 2024

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

from toastify-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.