Can't render badges properly on topbar

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

22 Dec 2021, 03:31

Hi,
I'm having a challenge getting badges to render correctly on topbar icons. I can get the badge to show at the lower right position but not in the upper right position. I see that with other themes it is possible. Here is how it's showing for me: https://www.dropbox.com/s/xfa386kufmtvk ... e.JPG?dl=0

And here is how it is showing for Serenity: https://www.dropbox.com/s/vyladc57ozkmv ... e.JPG?dl=0

This is my code in the topbar.xhtml:

Code: Select all

                    <li>
                        <a>
                        <i class="pi pi-bell topbar-icon-settings"/>
                    	<p:badge value="8" severity="danger">
                            <span class="icon-label">Notifications</span>
                        </p:badge>
                                           </a>
                        <div class="layout-quickmenu-tooltip">
                            <div class="layout-quickmenu-tooltip-arrow"></div>
                            <div class="layout-quickmenu-tooltip-text">Notifications</div>
                        </div>
                    </li>
I apologize for providing only links to the images. Doesn't seem that embedding images is working.

Any help would be appreciated. Thank you!

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

22 Dec 2021, 10:45

Fixed for the next version.

Code: Select all

                   <li>
                        <a>
                    	    <p:badge value="8" severity="danger">
                                <i class="pi pi-bell topbar-icon-settings"/>
                             </p:badge>
                             <span class="icon-label">Notifications</span>
                        </a>
                        <div class="layout-quickmenu-tooltip">
                            <div class="layout-quickmenu-tooltip-arrow"></div>
                            <div class="layout-quickmenu-tooltip-text">Notifications</div>
                        </div>
                    </li>
Best Regards,

tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

22 Dec 2021, 16:19

Thank you. That worked better but now the badge is getting cut off at the top:
https://www.dropbox.com/s/matj4cc17goqw ... t.JPG?dl=0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

24 Dec 2021, 14:38

Hi,
Fixed for the next version. The code above shows example usage.

Best Regards,

tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

25 Dec 2021, 22:33

Thank you for your reply.
I did download and install Harmony 4.0.0 and I'm still having the same issue. I copied and pasted your sample code. Here is what it looks like: https://www.dropbox.com/s/v8yogdxx2coqv ... f.JPG?dl=0

Am I missing something? Or, should I switch to a different theme?

Thank you again for you time.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

27 Dec 2021, 08:18

Hi,

Please download 4.1.0 version.

Best Regards,

tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

30 Dec 2021, 01:51

Hi,
I downloaded and installed 4.1.0 and am having better luck. The badges render properly if my URL is jsf. But they don't render properly if my URL is xhtml.
JSF: https://www.dropbox.com/s/0ptpqls2rc0yu ... 9.JPG?dl=0
XHTML: https://www.dropbox.com/s/d0yg3jl7gzzau ... 9.JPG?dl=0

I'm guessing now it may be a configuration issue but I'm not sure where to start with that. I am pretty much using the same web.xml as in the demo:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
>

    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>harmony-joy</param-value>
    </context-param>


    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Production</param-value>
    </context-param>
    <context-param>
        <param-name>primefaces.FONT_AWESOME</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
        <param-value>/WEB-INF/primefaces-harmony.taglib.xml</param-value>
    </context-param>
    <listener>
        <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
    </listener>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <mime-mapping>
        <extension>ttf</extension>
        <mime-type>application/font-sfnt</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff</extension>
        <mime-type>application/font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff2</extension>
        <mime-type>application/font-woff2</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>eot</extension>
        <mime-type>application/vnd.ms-fontobject</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>eot?#iefix</extension>
        <mime-type>application/vnd.ms-fontobject</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg#exosemibold</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg#exobolditalic</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg#exomedium</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg#exoregular</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg#fontawesomeregular</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>

        
</web-app>

tomtibbetts
Posts: 14
Joined: 07 Jan 2014, 21:32

02 Jan 2022, 01:50

Hi,
It's weird. all of a sudden it started working today. I can't figure out why. I don't wish to waste your time going down rabbit holes. So, if I have any more issues, I'll start another thread. Thank you so much for your help! :D

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

03 Jan 2022, 09:19

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Harmony - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests