Navbar toggle button not working BootsFaces

1
votes

I'm trying to explore BootsFaces, however I'm Stuck in Navbar as NavBar is not expanding in small screens.

Here is my index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:b="http://bootsfaces.net/ui">

<h:head></h:head>
<body>

    <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">
        <b:container>
            <b:navbarLinks>
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>
                <b:navLink value="Cricket" href="#"></b:navLink>
                <b:navLink value="football" href="#"></b:navLink>
                <b:navLink value="Sports" href="#"></b:navLink>
            </b:navbarLinks>
        </b:container>
    </b:navBar>

    <b:container>
        <p:row>
            <p:panel header="hello world">Welcome to Primefaces world</p:panel>
        </p:row>
    </b:container>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" 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_3_1.xsd">
    <context-param>
        <param-name>BootsFaces_USETHEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>
    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

And finally the pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.kp.swasthik</groupId>
    <artifactId>kp-bjsf</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>kp-bjsf Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <dependencies>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp.jstl</groupId>
            <artifactId>javax.servlet.jsp.jstl-api</artifactId>
            <version>1.2.1</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>javax.el</groupId>
            <artifactId>javax.el-api</artifactId>
            <version>3.0.0</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>net.bootsfaces</groupId>
            <artifactId>bootsfaces</artifactId>
            <version>0.7.0</version>
        </dependency>


        <dependency>
            <groupId>org.apache.myfaces.core</groupId>
            <artifactId>myfaces-impl</artifactId>
            <version>2.2.8</version>
        </dependency>

        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>3.2.0</version>
        </dependency>

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>5.2</version>
        </dependency>

        <dependency>
            <groupId>org.primefaces.themes</groupId>
            <artifactId>all-themes</artifactId>
            <version>1.0.10</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.12</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jul-to-slf4j</artifactId>
            <version>1.7.12</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
            <version>1.7.12</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>log4j-over-slf4j</artifactId>
            <version>1.7.12</version>
        </dependency>


    </dependencies>

    <repositories>
        <repository>
            <id>prime-repo</id>
            <name>PrimeFaces Maven Repository</name>
            <url>http://repository.primefaces.org</url>
            <layout>default</layout>
        </repository>
    </repositories>

    <build>
        <finalName>kp-bjsf</finalName>
        <plugins>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.3</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Here is the page displayed in desktop

enter image description here And the page displayed in mobile device enter image description here As shown above even though navbar toggle button gets displayed, on clicking the button I'm unable to see(doesn't expand) nav links.

Here is Firebug html code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link
    href="/kp-bjsf/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap"
    rel="stylesheet" type="text/css">
<link href="/kp-bjsf/javax.faces.resource/css/core.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link href="/kp-bjsf/javax.faces.resource/css/navbar.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link
    href="/kp-bjsf/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.2"
    type="text/css" rel="stylesheet">
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script src="/kp-bjsf/javax.faces.resource/js/tooltip.js.xhtml?ln=bsf"
    type="text/javascript"></script>
<link
    href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="/kp-bjsf/javax.faces.resource/js/html5shiv.js.xhtml?ln=bsf"></script><script src="/kp-bjsf/javax.faces.resource/js/respond.js.xhtml?ln=bsf"></script><![endif]-->
<script type="text/javascript">if(window.PrimeFaces){}</script>
</head>
<body>
    <div role="navigation" class="navbar navbar-inverse navbar-fixed-top"
        id="j_id_5">
        <div class="container">
            <div class="navbar-header">
                <button data-target=".navbar-ex1-collapse" data-toggle="collapse"
                    class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span
                        class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"><span>KP's Brand</span></a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <div class="container" id="j_id_6">
                    <ul class="nav navbar-nav" id="j_id_7">
                        <li class="" name="j_id_8" id="j_id_8"><a tabindex="-1"
                            role="menuitem" href="#"><span><i class="fa fa-home"
                                    id="j_id_8_icon"></i></span> home</a></li>
                        <li class="" name="j_id_9" id="j_id_9"><a tabindex="-1"
                            role="menuitem" href="#">Cricket</a></li>
                        <li class="" name="j_id_a" id="j_id_a"><a tabindex="-1"
                            role="menuitem" href="#">football</a></li>
                        <li class="" name="j_id_b" id="j_id_b"><a tabindex="-1"
                            role="menuitem" href="#">Sports</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="j_id_c">
        <div data-widget="widget_j_id_e"
            class="ui-panel ui-widget ui-widget-content ui-corner-all"
            id="j_id_e">
            <div
                class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                id="j_id_e_header">
                <span class="ui-panel-title">hello world</span>
            </div>
            <div class="ui-panel-content ui-widget-content" id="j_id_e_content">Welcome
                to Primefaces world</div>
        </div>
    </div>

    <div id="textarea_simulator"
        style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
</body>
</html>

And also let me know how to render <p:panel> after <b:navbar> currently its overlapping

1
jsfbootsfaces
Doesn't look bad at first glance, so let's start with checking simple things first. Does the feature work with your mobile browser and our showcase bootsfaces.net/bootstrap/modal.jsf ? – Stephan Rauh
I managed to reproduce and solve the bug - the my answer below. – Stephan Rauh
It's recommended to use <h:head> aswell. – alexander

1 Answers

2
votes

It took me a while to see the error, but it turns out to be really simple: replace the HTML-style <body> tag by <h:body>. That's a nasty trap that caught me more than once, too.

As for the overlapping: in our showcase we've simply added a 75 pixel padding to the body tag.

While we're at it, move the <b:container> tag up one level. It doesn't make sense inside the navbar. <b:container> is about defining the width of the page (and a couple of other things). Second, please put a <b:column> inside the <b:row>. The resulting source code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">            
<html xmlns="http://www.w3.org/1999/xhtml"                                                                                           
    xmlns:ui="http://java.sun.com/jsf/facelets"                                                                                      
    xmlns:f="http://java.sun.com/jsf/core"                                                                                           
    xmlns:h="http://java.sun.com/jsf/html"                                                                                           
    xmlns:p="http://primefaces.org/ui"                                                                                               
    xmlns:pe="http://primefaces.org/ui/extensions"                                                                                   
    xmlns:b="http://bootsfaces.net/ui">                                                                                              

  <h:head></h:head>                                                                                                                  
  <h:body style="padding-top: 75px">                                                                                                 
    <b:container>                                                                                                                    
        <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">                                                       
            <b:navbarLinks>                                                                                                          
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>                                                     
                <b:navLink value="Cricket" href="#"></b:navLink>                                                                     
                <b:navLink value="Football" href="#"></b:navLink>                                                                    
                <b:navLink value="Sports" href="#"></b:navLink>                                                                      
            </b:navbarLinks>                                                                                                         
        </b:navBar>                                                                                                                  
    </b:container>                                                                                                                   

    <b:container>                                                                                                                    
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:panel title="Hello world">
                   Welcome to the BootsFaces world :)
                </b:panel>                                                
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:messages />                                                                                                       
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
    </b:container>                                                                                                                   
  </h:body>                                                                                                                          
</html>