Primefaces NotificationBar close icon not visible

Question

In the documentation of primefaces, it is said that "Note that notificationBar has a default built-in close icon to hide the content.". But so far I could not get it displayed ? Is there a special property or facet required to show the close icon ?

pf version I am using is 6.2

Answer 1

If you see the notification.js resource inside the Primefaces library, you can see that they took into account to give to the close icon the "hide functionality":

primefaces-6_2\src\main\resources\META-INF\resources\primefaces\notificationbar\notificationbar.js =>

 /**
 * PrimeFaces NotificationBar Widget
 */
PrimeFaces.widget.NotificationBar = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        
        var _self = this;
    
        //relocate
        this.jq.css(this.cfg.position, '0').appendTo($('body'));

        //display initially
        if(this.cfg.autoDisplay) {
            $(this.jq).css('display','block')
        }

        //bind events
        this.jq.children('.ui-notificationbar-close').click(function() {
            _self.hide();
        });
    },
   

So, considering the previous code, if a children component has the ui-notificationbar-close class and you click on it, the NotificationBar component will be hided calling to hide function automatically (without having to use the PF(widgetVar).hide().

I have tested with the following code and in effect, the notificationbar disappears after clicking on the close icon:

   <p:notificationBar id="notificationBar" position="top" effect="slide" styleClass="top" widgetVar="myNotificationBarWV" autoDisplay="false">
          <i class="ui-icon ui-icon-closethick ui-notificationbar-close"></i>
            <h:outputText value="You Rock!" style="font-size:1.5 rem;"/>
        </p:notificationBar>