Topbar profile menu not opening..

ntapan
Posts: 9
Joined: 02 Sep 2015, 16:35

23 Jun 2017, 09:05

Yes, it is the latest version, 1.0.1

I think the problem is about " <span class"
because, search button doesn't appers too, which it is in the xhtml code :
"<input type="text" placeholder="Search"/>
<span class="topbar-search-icon fa fa-search"></span>"

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

23 Jun 2017, 12:49

Thanks for the update! I couldn't replicate it on https://www.primefaces.org/apollo/. Could you please attach your topbar.xhtml page and a screenshot for us?

ntapan
Posts: 9
Joined: 02 Sep 2015, 16:35

29 Jun 2017, 13:43

Hi,

Sorry for late reply, because of vacation.

I have deleted whole project and created again, now it works.
But, I have another problem: icons do not show up.

topbar.xhtml: (same as sample)
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pa="http://primefaces.org/apollo">

<div class="topbar clearfix">
<p:graphicImage class="logo" library="apollo-layout" name="images/apollo_logo.png" />

<a href="#" class="profile">
<p:graphicImage library="apollo-layout" name="images/profile.png" />
</a>
<span class="topbar-search">
<input type="text" placeholder="Search"/>
<span class="topbar-search-icon fa fa-search"></span>
</span>
<div id="topbar-menu" class="animated">
<a href="#">
<span class="topbar-item-text">Messages</span>
<span class="topbar-icon fa fa-envelope-o animated swing infinite"></span>
<span class="topbar-item-badge animated pulse rubberBand">3</span>
</a>
<a href="#"><span class="topbar-item-text">Settings</span><span class="topbar-icon fa fa-gear"></span></a>
<a href="#"><span class="topbar-item-text">User</span><span class="topbar-icon fa fa-user"></span></a>
</div>
</div>

<h:form id="menuform">
<div id="menubar">
<a class="menu-button" href="#">
<span></span>
<span></span>
<span></span>
</a>
<div class="menu-container">
<div class="nano">
<div class="nano-content menu-scroll-content">
<pa:menu>
<p:menuitem id="om_dashboard" value="Dashboard" icon="fa fa-shield" />
<!-- <p:submenu id="themes" label="Themes" icon="fa fa-paint-brush"> -->
<!-- <p:menuitem value="Blue" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('blue')}" ajax="false" /> -->
<!-- <p:menuitem value="Light Blue" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('light-blue')}" ajax="false" /> -->
<!-- <p:menuitem value="Green" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('green')}" ajax="false" /> -->
<!-- <p:menuitem value="Light Green" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('light-green')}" ajax="false" /> -->
<!-- <p:menuitem value="Lime" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('lime')}" ajax="false" /> -->
<!-- <p:menuitem value="Red" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('red')}" ajax="false" /> -->
<!-- <p:menuitem value="Orange" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('orange')}" ajax="false" /> -->
<!-- <p:menuitem value="Deep Orange" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('deep-orange')}" ajax="false" /> -->
<!-- <p:menuitem value="Purple" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('purple')}" ajax="false" /> -->
<!-- <p:menuitem value="Deep Purple" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('deep-purple')}" ajax="false" /> -->
<!-- <p:menuitem value="Pink" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('pink')}" ajax="false" /> -->
<!-- <p:menuitem value="Indigo" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('indigo')}" ajax="false" /> -->
<!-- <p:menuitem value="Cyan" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('cyan')}" ajax="false" /> -->
<!-- <p:menuitem value="Teal" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('teal')}" ajax="false" /> -->
<!-- <p:menuitem value="Blue Grey" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('blue-grey')}" ajax="false" /> -->
<!-- </p:submenu> -->
<!-- <p:submenu id="om_topbar" label="Top Bar" icon="fa fa-desktop"> -->
<!-- <p:menuitem id="om_darkbar" value="Dark" icon="fa fa-cube" onclick="$('.topbar').addClass('darkbar');return false;" /> -->
<!-- <p:menuitem id="om_coloredbar" value="Colored" icon="fa fa-paint-brush" onclick="$('.topbar').removeClass('darkbar');return false;" /> -->
<!-- </p:submenu> -->
<!-- <p:submenu id="om_components" label="Components" icon="fa fa-sitemap"> -->
<!-- <p:menuitem id="om_sample" value="Sample Page" icon="fa fa-columns" outcome="/sample" /> -->
<!-- <p:menuitem id="om_forms" value="Forms" icon="fa fa-code" outcome="/forms" /> -->
<!-- <p:menuitem id="om_data" value="Data" icon="fa fa-table" outcome="/data" /> -->
<!-- <p:menuitem id="om_panels" value="Panels" icon="fa fa-list-alt" outcome="/panel" /> -->
<!-- <p:menuitem id="om_overlays" value="Overlays" icon="fa fa-square" outcome="/overlay" /> -->
<!-- <p:menuitem id="om_menus" value="Menus" icon="fa fa-minus-square-o" outcome="/menu" /> -->
<!-- <p:menuitem id="om_messages" value="Messages" icon="fa fa-circle-o-notch" outcome="/messages" /> -->
<!-- <p:menuitem id="om_charts" value="Charts" icon="fa fa-area-chart" outcome="/charts" /> -->
<!-- <p:menuitem id="om_file" value="File" icon="fa fa-arrow-circle-o-up" outcome="/file" /> -->
<!-- <p:menuitem id="om_misc" value="Misc" icon="fa fa-user-secret" outcome="/misc" /> -->
<!-- </p:submenu> -->
<!-- <p:menuitem id="om_db_landing" value="Landing" icon="fa fa-certificate" outcome="/landing"/> -->
<!-- <p:submenu id="om_default" label="Template Pages" icon="fa fa-life-saver"> -->
<!-- <p:menuitem id="om_empty" value="Empty Page" icon="fa fa-square-o" outcome="/empty" /> -->
<!-- <p:menuitem id="om_login" value="Login Page" icon="fa fa-sign-in" outcome="/login" /> -->
<!-- <p:menuitem id="om_error" value="Error Page" icon="fa fa-exclamation-circle" outcome="/error" /> -->
<!-- <p:menuitem id="om_404" value="404 Page" icon="fa fa-times" outcome="/404" /> -->
<!-- <p:menuitem id="om_access" value="Access Denied Page" icon="fa fa-exclamation-triangle" outcome="/access" /> -->
<!-- </p:submenu> -->
<p:submenu id="om_hierarchy" label="Menu Hierarchy" icon="fa fa-gg">
<p:submenu id="om_sm1" label="Submenu 1" icon="fa fa-sign-in">
<p:submenu id="om_sm11" label="Submenu 1.1" icon="fa fa-sign-in">
<p:menuitem id="om_lnk111" value="Link 1.1.1" icon="fa fa-sign-in" url="#" />
<p:menuitem id="om_lnk112" value="Link 1.1.2" icon="fa fa-sign-in" url="#" />
<p:menuitem id="om_lnk113" value="Link 1.1.3" icon="fa fa-sign-in" url="#" />
</p:submenu>
<p:submenu id="om_sm12" label="Submenu 1.2" icon="fa fa-sign-in">
<p:menuitem id="om_lnk121" value="Link 1.2.1" icon="fa fa-sign-in" url="#" />
</p:submenu>
</p:submenu>
<p:submenu id="om_sm2" label="Submenu 2" icon="fa fa-sign-in">
<p:submenu id="om_sm21" label="Submenu 2.1" icon="fa fa-sign-in">
<p:menuitem id="om_lnk211" value="Link 2.1.1" icon="fa fa-sign-in" url="#" />
<p:menuitem id="om_lnk212" value="Link 2.1.2" icon="fa fa-sign-in" url="#" />
</p:submenu>
<p:submenu id="om_sm22" label="Submenu 2.2" icon="fa fa-sign-in">
<p:menuitem id="om_lnk221" value="Link 2.2.1" icon="fa fa-sign-in" url="#" />
</p:submenu>
</p:submenu>
</p:submenu>

<!-- <p:menuitem id="om_doc" value="Documentation" icon="fa fa-book" outcome="/docs"/> -->
</pa:menu>
</div>
</div>
</div>
</div>
</h:form>

</ui:composition>

ntapan
Posts: 9
Joined: 02 Sep 2015, 16:35

29 Jun 2017, 13:50

hi,

Solved it :))
Sorry to bother you :(

I have forgotten to add in web.xml:
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

29 Jun 2017, 14:58

Glad to hear, thanks for the update!

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests