Problems primefaces bootstrap theme render with twitter bootstrap

Question

I'm trying to use Primefaces 5.1 with Twitter Bootstrap 3.3.4

I've added to the files following code in facelets template <h:head> section

<h:head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>

Web.xml

<context-param>
   <param-name>primefaces.THEME</param-name>
   <param-value>bootstrap</param-value>
</context-param>

And I'm trying to use selectCheckboxMenu component

<h:panelGrid columns="2" cellpadding="5" cellspacing="5" >
  <p:outputLabel value="Companies sector"/>
  <p:selectCheckboxMenu value="#{operations.selectedSectors}" label="Choose"
                      filter="true" filterMatchMode="startsWith" panelStyle="width:250px" style="margin-right: 5px">
     <f:selectItems value="#{operations.sectors}" />
</p:selectCheckboxMenu>
...

The render

enter image description here

When I remove the bootstrap

enter image description here

Cellpadding and cellspacing does not work as well as seen.

I tried <f:facet name"first"> and <f:facet name"last"> and <f:facet name"middle">

How do I solve this problem?

Does your favourite browser correctly render `bootstrap.min.css` as it appears from those images? If yes then, some CSS classes might be mixing with some of underlying PrimeFaces CSS classes. — Tiny, Mar 22 '15 at 19:07

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

They just don't work together, due to the new box-sizing of bootstrap 3.

Problems primefaces bootstrap theme render with twitter bootstrap

1 Answers1