Integrating Bootstrap 3.3.7 navbar and Primefaces 6.1

[jmg]

Just in case someone wants to check the CSS on its own computer.

Project POM dependencies:

Code: Select all

	<dependencies>

		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>1.5.6</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.2</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.2</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
		</dependency>
		<dependency>
			<groupId>org.glassfish</groupId>
			<artifactId>javax.faces</artifactId>
			<version>2.2.2</version>
		</dependency>

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

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

		<dependency>
			<groupId>org.apache.tomcat</groupId>
			<artifactId>tomcat-el-api</artifactId>
			<version>8.5.5</version>
		</dependency>
		
	</dependencies>

The only content inside an XHTML page:

Code: Select all

<h:head>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
	</h:head>
	<h:body>
		<h:form id="theform">

            
                <p:selectOneMenu id="console" value="#{indexBB.test}" >
	            <f:selectItem itemLabel="Select One" itemValue="" />
	            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
	            <f:selectItem itemLabel="PS4" itemValue="PS4" />
	            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
	        </p:selectOneMenu>
		</h:form>
	</h:body>

The code above points to a String variable called "test" with getters and setters.
That's all you need to replicate the CSS issue I describe in this post.

[Melloware]

Looks like PF 6.2 will use Jquery 3.2.1.

https://github.com/primefaces/primefaces/issues/3062

[kukeltje]

And what **is** the issue? Bootstrap uses a completely ('arrogant') way of changing the box-sizing. https://stackoverflow.com/questions/281 ... ng-borders and hence makes PrimeFaces components look bad, at least in their basic themes. Some elite themes seem to be using the same box-sizing as Bootstrap does and hence might work

[shafin]

Just ran into the same problem you were having. Though I don't know whether you have found any solution to it, I just made a work around this. So far you assume the root problem, its actually the box-sizing issue that Bootstrap changes to its version 3. From the version 3 they are using box-sizing: border-box. Switching back to content-box for the broken elements carefully helps fixing the problem. here is the fix I used for my case, where I changed box-sizing property for all elements those are rendered by the primefaces.

Code: Select all

#pageContent *, *:after, *:before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

This StackOverflow question https://stackoverflow.com/questions/191 ... ayout?lq=1 helped to find this fix. Lets share where you ended up.