creativetimofficial / ct-vue-paper-dashboard-pro

Vue Paper Dashboard PRO - made by Creative Tim
https://www.creative-tim.com/product/vue-paper-dashboard-pro
41 stars 13 forks source link

Notificaiton vs NavBar Z-Index #103

Open detinho opened 4 years ago

detinho commented 4 years ago

I was testing the notifications on the theme (Vue Paper Dashboard 2 Pro) and noticed the close button on the notification was not working when displaying the notification on the top. Then I realized the z-index of NavBar is set higher than the notification component. Bellow the relevant bits of css:

_plugin-vue-notifyjs.scss

.notifications.vue-notifyjs {
  .alert {
    z-index: 1000;
    position: fixed;
  }
  ...
}

_navbar.scss:

    &.navbar-absolute{
        position: absolute;
        width: 100%;
        padding-top: 10px;
        z-index: 1029;
    }

I fixed the issue setting a higher z-index for the notification on a custom scss file I have for my project, but I think this should be fixed on the projects source.