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
And the page displayed in mobile device 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&v=5.2"
type="text/css" rel="stylesheet">
<script
src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.2"
type="text/javascript"></script>
<script
src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.2"
type="text/javascript"></script>
<script
src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&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
<h:head>
aswell. – alexander