0

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

Santhosh
  • 9,965
  • 20
  • 103
  • 243

1 Answers1

2

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

MUGABA
  • 751
  • 6
  • 7
Oni_
  • 35
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 03 '22 at 00:23