Fomantic ui toast not showing up because of zindex

Question

I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?

I have tried this 'it works normally but not on the site i am working on'

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('body')
                .toast({
                    message: 'I am a toast, nice to meet you !'
                });
        });
    </script>
</head>
<body>

</body>
</html>

4b0 · Accepted Answer · 2020-06-19T07:19:21.063

Give id to your body and handle via CSS like below.

#yourID {
  background-color:rgba(255, 0, 0, 0.4);
  z-index: 9999;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#yourID')
        .toast({
          message: 'I am a toast, nice to meet you !'
        });
    });
  </script>
</head>

<body id="yourID">

</body>

</html>

Note: work with id , not with class.

score 0 · Answer 2 · answered Jun 19 '20 at 10:41

The z-index for toast is given by the toast-container which already got z-index:9999 by default.

You can override this according to your needs (check your sites code for the highest z-index and add 1) by

.ui.toast-container {
  z-index: 999999;
}

Every toast inside this container will inherit the z-index. To be even more sure you might add the z-index for every single toast as well

.ui.toast-container .toast-box {
    z-index:999999;
}

Fomantic ui toast not showing up because of zindex

2 Answers2