'react-toastify: How to position the toasts a little up from the bottom

I want to position the toast at the bottom-right but with some offset from the bottom

example,.

image

Currently this is my ToastContainer definition

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Redirect from="/" to="/admin" />
    </Switch>
    <ToastContainer
        position="bottom-right"
        autoClose={500000}
        hideProgressBar
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
    />
  </Router>,
  document.getElementById("root")
);

I checked the css it shows

.Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em;
}

HOw to adjust this to

.Toastify__toast-container--bottom-right {
    bottom: 11em;
    right: 1.5em;
}

Where can i mention this

react-toastify


Solution 1:[1]

Just mention it in the CSS imported in your .jsx file. Please add a className to your Container like

<ToastContainer
        className="toast-position"
        position="top-center"
        autoClose={10000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="dark"
      />

And then in your css file you can do something like this

.toast-position {
  top: 8rem !important;
}

You can also checkout here for more info https://github.com/fkhadra/react-toastify/issues/263

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MUGABA

Related Questions