Search code examples
javascriptjqueryhtmlcssgritter

jQuery gritter plugin close icon remains hidden

I'm using gritter.js to notificate success or error messages. It works but the "X" close-icon remains hidden. I check in CSS rules of the element, they are all right but having no effects. 

<script src="/components/jquery.gritter/js/jquery.gritter.js"></script>
<link rel="stylesheet" href="/components/jquery.gritter/css/jquery.gritter.css" />

  /*some other code*/
  switch (window.location.hash) {
    case "#success":
    $.gritter.add({
      title: 'Molto bene!',
      text: "L'operazione è stata eseguita con successo!",
      sticky: true,
      class_name: 'gritter-success gritter-light'
    });
    break;
    case "#error":
    $.gritter.add({
      title: 'Oops!',
      text: "Qualcosa è andato storto. L'operazione non è stata eseguita!",
      class_name: 'gritter-error gritter-light'
    });
    break;
  }

The js produce an icon like: <a style="display: none;" class="gritter-close" href="#" tabindex="1">Close Notification</a>

And the css rules are:

.gritter-light .gritter-close {
    background-image: none;
    color: #444;}

//applied onhover
elemento {
    display: block;}
Solution

  • A little late maybe but could it be so that you are using the ace template as well.

    I had the same problem recently. Turns out ace template has a css rule that sets the font size of gritter close icon to zero. Simply overriding that css rule fixed the issue for me.