Dropdown Menu in Navbar not rendered onClick (Messages, Notification, User Buttons)

[migbue]

Issue Overview

I just copied the Messages, Notification and User Buttons from the topbar.xhtml template example to my project. When clicking on the Buttons the dropdown boxes are not rendered. Nothin happens. Did I miss a special .css or .js part?

Current Behaviour

When hitting the Font Awesome Symbols for the dropdown messages-menu or dropdown notifications-menu nothing happens. The click does not change the div class from "dropdown notifications-menu" to "dropdown notifications-menu open" like in the showcase demo. Same for all other buttons. (Messages, User, Controlpanel).

Expected Behaviour

Like in showcase demo: Click on the Message / Notifcation Button and a drodown box will be rendered. div classes are changed through click to ".... open" and area-expanded is set from false to true.

How to reproduce

For me: Used the topbar.xhtml example in your project. Dropdown will not work. Did I forget something? Some code snippets:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pe="http://primefaces.org/ui/extensions">

    <h:form>

        <div id="navi_apps">
        <ul class="nav navbar-nav usercfg">
                <li class="dropdown messages-menu"><a href="#"
                    class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                        <i class="fa fa-envelope-o"></i> <span class="label label-success">4</span>
                </a>
                    <ul class="dropdown-menu">
                        <li class="header align-center">You have 4 messages</li>
                        <li>
                            <ul class="menu">
                                <li>Message 1</li>
                                <li>Message 2</li>
                                <li>Message 3</li>
                                <li>Message 4</li>
                            </ul>
                        </li>
                        <li class="footer"><a href="#">See all messages</a></li>
                    </ul></li>
                <li class="dropdown notifications-menu"><a href="#"
                    class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                        <i class="fa fa-bell-o"></i> <span class="label label-warning">2</span>
                </a>
                    <ul class="dropdown-menu">
                        <li class="header align-center">You have 2 notifications.</li>
                        <li>
                            <!-- inner menu: contains the actual data -->
                            <ul class="menu">
                                <li>Notification 1</li>

                                <li>Notification 2</li>
                            </ul>
                        </li>
                        <li class="footer"><a href="#">See all notifications</a></li>
                    </ul></li>
                <li class="dropdown user user-menu"><a href="#"
                    class="dropdown-toggle" data-toggle="dropdown"> <span class="hidden-xs">Michi Müller</span>
                </a>
                    <ul class="dropdown-menu">
                        <li class="user-header">                            
                            <p>
                                Rafael M. Pestano <small> Java EE Developer </small>
                            </p>
                        </li>
                        <li class="user-footer"><h:form prependId="false">
                                <div class="pull-left">
                                    <p:commandLink styleClass="btn btn-danger"
                                        value="Change password" />
                                </div>
                                <div class="pull-right">
                                    <p:commandLink id="logout" action="#{logoutMB.doLogout}"
                                        title="Logoff">
                                        <i class="fa fa-sign-out fa-2x"></i>
                                    </p:commandLink>
                                </div>
                            </h:form></li>
                    </ul></li>

                <li><a href="#" id="layout-setup" data-toggle="control-sidebar"><i
                        class="fa fa-gears"></i></a></li>
            </ul>

        </div>
    </h:form>
</ui:composition>

css File:

/* Navi for User Config. Currently not loaded WHY?!? */
#navi_apps .usercfg  {
    padding-left: 50px;
}

#navi_apps .usercfg li,
#navi_apps .usercfg li > a  {
    border: none;
}

Only difference I have: That I have a h:form and a div around it because I need that for design and different Navigation parts.

Additional Information

• AdminFaces version: 1.0 (Release)
• PrimeFaces version: 6.2
• JSF implementation: JEE7 jboss-jsf-api_2.2_spec
• Using black-light admin-theme skin

[rmpestano]

Hi, there is a additional </h:form>, isn't that the problem?

It would help if you could reproduce your issue in admin-starter project

[rmpestano]

Hi, any update on this? I'm closing issues without update from users.