24

Estou tentanto usar Bootstrap juntamente com primefaces em um projeto JSF, o problema é que na maioria dos componentes eu preciso usar tags do JSF ao invés do primefaces porque o primefaces faz algumas gambiarras com o html e com isso os css do bootstrap e do primefaces ficam se conflitando em alguns componentes, um pequeno código pra ficar melhor entendido:

<p:outputPanel styleClass="form-group">
    <p:outputLabel value="Nome Beneficiário" for="nome-beneficio" styleClass="col-lg-2 control-label" />
    <p:outputPanel styleClass="col-lg-4" >
        <p:inputText id="nome-beneficio" styleClass="form-control" />
    </p:outputPanel>
    <p:outputLabel value="Tipo do Benefício" for="tipo-beneficio" styleClass="col-lg-2 control-label" />
    <p:outputPanel styleClass="col-lg-3" >
        <h:selectOneMenu id="tipo-beneficio" styleClass="form-control" value="#{processomb.tipoBeneficio}" valueChangeListener="#{processomb.changeBeneficio}" >  
            <p:ajax update="campos-despesa" />
            <f:selectItem itemLabel="Funeral" itemValue="funeral" />
            <f:selectItem itemLabel="Natalidade" itemValue="natalidade" />   
            <f:selectItem itemLabel="Creche" itemValue="creche" />
            <f:selectItem itemLabel="Doença" itemValue="doenca" />   
        </h:selectOneMenu>  
    </p:outputPanel>
</p:outputPanel>

Onde tem o h:selectOneMenu ele consegue exibir perfeitamente, mas se eu usar p:selectOneMenu ele desenha duas divs uma com o estilo do bootstrap e outra com o do primefaces para o mesmo componente.Comparação entre bootstrap e primefaces

O estilo do primefaces é alterado mesmo que eu tire a styleClass="form-control", haveria alguma forma de conviverem os dois em harmonia?

5
  • 1
    Tem um esquema de tirar o bootstrap das tags html por default e deixar só como classes, mas dai você teria que colocar as classes que deseja manualmente. Não se seria uma boa solução
    – Guerra
    Commented 13/12/2013 às 12:18
  • Até o momento, acho que ainda não tem como -- em parte porque os componentes do Primefaces são baseados no jQuery-UI.
    – elias
    Commented 13/12/2013 às 12:44
  • 1
    Você tentou desabilitar o tema do primefaces e importar o do bootstrap na mão?
    – uaiHebert
    Commented 16/12/2013 às 17:29
  • Não @uaiHebert, o que estou fazendo para contornar esse problema é não importar nenhuma classe do bootstrap no componente do primefaces que vou utilizar, assim ele fica com o design do primefaces mesmo... Commented 16/12/2013 às 17:39
  • PESSOAL!!! ESSA PERGUNTA SE TORNOU BASTANTE POPULAR, ENTÃO APÓS TODO ESSE TEMPO ESTOU ADICIONANDO UMA SUGESTÃO DO QUE PODE SER A SOLUÇÃO ATUAL PARA O PROBLEMA: USAR BOOTFACES. PEÇO A QUEM INTERESSAR DAR UMA OLHADINHA EM WWW.BOOTSFACES.NET Commented 15/10/2016 às 6:32

8 Respostas 8

7

A incompatibilidade do Bootstrap com o jQuery UI (no qual o PrimeFaces é baseado) é conhecida. Além disso, o tema baseado no Bootstrap do PrimeFaces é bem alterado em relação à versão original da biblioteca, o que não ajuda muito quando se deseja usar algumas funcionalidades dela.

Se o seu objetivo é usar o Grid system, crie uma versão personalizada apenas com esse componente. Isso vai evitar conflitos com outros componentes e scripts e, com um pouco de sorte, não vai afetar as funcionalidades que você está usando do PrimeFaces.

Em alguns casos, mesmo com a biblioteca completa é possível resolver conflitos com outros frameworks em componentes específicos usando a função noConflict(). Isso evita que tanto o Bootstrap quanto o outro framework (como o jQuery UI) tentam "melhorar" o mesmo elemento.

2

Se o que você quiser for apenas o sistema de colunas do bootstrap, você pode entrar no site do bootstrap e baixar um estilo apenas com este recurso, e com apenas algumas poucas modificações você consegue deixar ele 100% compatível com o primefaces. Segue o exemplo, esse bootstrap eu adaptei para meu projeto:

/*
  Bootstrap v3.3.1 (http://getbootstrap.com)
*/

/* NOTE: This file has Normalize.css removed. It still requires a "reset.css", so we're using this... https://github.com/nathansmith/unsemantic/blob/master/assets/stylesheets/reset.css */

  • { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }

@media (min-width: 768px) { .container { width: 750px; } }

@media (min-width: 992px) { .container { width: 970px; } }

@media (min-width: 1200px) { .container { width: 1170px; } }

.container-fluid { margin-right: auto; margin-left: auto; }

.row { margin-left: -15px; margin-right: -15px; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding: 2px 4px 4px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }

.col-xs-12 { width: 100%; }

.col-xs-11 { width: 91.66666667%; }

.col-xs-10 { width: 83.33333333%; }

.col-xs-9 { width: 75%; }

.col-xs-8 { width: 66.66666667%; }

.col-xs-7 { width: 58.33333333%; }

.col-xs-6 { width: 50%; }

.col-xs-5 { width: 41.66666667%; }

.col-xs-4 { width: 33.33333333%; }

.col-xs-3 { width: 25%; }

.col-xs-2 { width: 16.66666667%; }

.col-xs-1 { width: 8.33333333%; }

.col-xs-pull-12 { right: 100%; }

.col-xs-pull-11 { right: 91.66666667%; }

.col-xs-pull-10 { right: 83.33333333%; }

.col-xs-pull-9 { right: 75%; }

.col-xs-pull-8 { right: 66.66666667%; }

.col-xs-pull-7 { right: 58.33333333%; }

.col-xs-pull-6 { right: 50%; }

.col-xs-pull-5 { right: 41.66666667%; }

.col-xs-pull-4 { right: 33.33333333%; }

.col-xs-pull-3 { right: 25%; }

.col-xs-pull-2 { right: 16.66666667%; }

.col-xs-pull-1 { right: 8.33333333%; }

.col-xs-pull-0 { right: auto; }

.col-xs-push-12 { left: 100%; }

.col-xs-push-11 { left: 91.66666667%; }

.col-xs-push-10 { left: 83.33333333%; }

.col-xs-push-9 { left: 75%; }

.col-xs-push-8 { left: 66.66666667%; }

.col-xs-push-7 { left: 58.33333333%; }

.col-xs-push-6 { left: 50%; }

.col-xs-push-5 { left: 41.66666667%; }

.col-xs-push-4 { left: 33.33333333%; }

.col-xs-push-3 { left: 25%; }

.col-xs-push-2 { left: 16.66666667%; }

.col-xs-push-1 { left: 8.33333333%; }

.col-xs-push-0 { left: auto; }

.col-xs-offset-12 { margin-left: 100%; }

.col-xs-offset-11 { margin-left: 91.66666667%; }

.col-xs-offset-10 { margin-left: 83.33333333%; }

.col-xs-offset-9 { margin-left: 75%; }

.col-xs-offset-8 { margin-left: 66.66666667%; }

.col-xs-offset-7 { margin-left: 58.33333333%; }

.col-xs-offset-6 { margin-left: 50%; }

.col-xs-offset-5 { margin-left: 41.66666667%; }

.col-xs-offset-4 { margin-left: 33.33333333%; }

.col-xs-offset-3 { margin-left: 25%; }

.col-xs-offset-2 { margin-left: 16.66666667%; }

.col-xs-offset-1 { margin-left: 8.33333333%; }

.col-xs-offset-0 { margin-left: 0%; }

@media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }

.col-sm-12 {
    width: 100%;
}

.col-sm-11 {
    width: 91.66666667%;
}

.col-sm-10 {
    width: 83.33333333%;
}

.col-sm-9 {
    width: 75%;
}

.col-sm-8 {
    width: 66.66666667%;
}

.col-sm-7 {
    width: 58.33333333%;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-5 {
    width: 41.66666667%;
}

.col-sm-4 {
    width: 33.33333333%;
}

.col-sm-3 {
    width: 25%;
}

.col-sm-2 {
    width: 16.66666667%;
}

.col-sm-1 {
    width: 8.33333333%;
}

.col-sm-pull-12 {
    right: 100%;
}

.col-sm-pull-11 {
    right: 91.66666667%;
}

.col-sm-pull-10 {
    right: 83.33333333%;
}

.col-sm-pull-9 {
    right: 75%;
}

.col-sm-pull-8 {
    right: 66.66666667%;
}

.col-sm-pull-7 {
    right: 58.33333333%;
}

.col-sm-pull-6 {
    right: 50%;
}

.col-sm-pull-5 {
    right: 41.66666667%;
}

.col-sm-pull-4 {
    right: 33.33333333%;
}

.col-sm-pull-3 {
    right: 25%;
}

.col-sm-pull-2 {
    right: 16.66666667%;
}

.col-sm-pull-1 {
    right: 8.33333333%;
}

.col-sm-pull-0 {
    right: auto;
}

.col-sm-push-12 {
    left: 100%;
}

.col-sm-push-11 {
    left: 91.66666667%;
}

.col-sm-push-10 {
    left: 83.33333333%;
}

.col-sm-push-9 {
    left: 75%;
}

.col-sm-push-8 {
    left: 66.66666667%;
}

.col-sm-push-7 {
    left: 58.33333333%;
}

.col-sm-push-6 {
    left: 50%;
}

.col-sm-push-5 {
    left: 41.66666667%;
}

.col-sm-push-4 {
    left: 33.33333333%;
}

.col-sm-push-3 {
    left: 25%;
}

.col-sm-push-2 {
    left: 16.66666667%;
}

.col-sm-push-1 {
    left: 8.33333333%;
}

.col-sm-push-0 {
    left: auto;
}

.col-sm-offset-12 {
    margin-left: 100%;
}

.col-sm-offset-11 {
    margin-left: 91.66666667%;
}

.col-sm-offset-10 {
    margin-left: 83.33333333%;
}

.col-sm-offset-9 {
    margin-left: 75%;
}

.col-sm-offset-8 {
    margin-left: 66.66666667%;
}

.col-sm-offset-7 {
    margin-left: 58.33333333%;
}

.col-sm-offset-6 {
    margin-left: 50%;
}

.col-sm-offset-5 {
    margin-left: 41.66666667%;
}

.col-sm-offset-4 {
    margin-left: 33.33333333%;
}

.col-sm-offset-3 {
    margin-left: 25%;
}

.col-sm-offset-2 {
    margin-left: 16.66666667%;
}

.col-sm-offset-1 {
    margin-left: 8.33333333%;
}

.col-sm-offset-0 {
    margin-left: 0%;
}

}

@media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }

.col-md-12 {
    width: 100%;
}

.col-md-11 {
    width: 91.66666667%;
}

.col-md-10 {
    width: 83.33333333%;
}

.col-md-9 {
    width: 75%;
}

.col-md-8 {
    width: 66.66666667%;
}

.col-md-7 {
    width: 58.33333333%;
}

.col-md-6 {
    width: 50%;
}

.col-md-5 {
    width: 41.66666667%;
}

.col-md-4 {
    width: 33.33333333%;
}

.col-md-3 {
    width: 25%;
}

.col-md-2 {
    width: 16.66666667%;
}

.col-md-1 {
    width: 8.33333333%;
}

.col-md-pull-12 {
    right: 100%;
}

.col-md-pull-11 {
    right: 91.66666667%;
}

.col-md-pull-10 {
    right: 83.33333333%;
}

.col-md-pull-9 {
    right: 75%;
}

.col-md-pull-8 {
    right: 66.66666667%;
}

.col-md-pull-7 {
    right: 58.33333333%;
}

.col-md-pull-6 {
    right: 50%;
}

.col-md-pull-5 {
    right: 41.66666667%;
}

.col-md-pull-4 {
    right: 33.33333333%;
}

.col-md-pull-3 {
    right: 25%;
}

.col-md-pull-2 {
    right: 16.66666667%;
}

.col-md-pull-1 {
    right: 8.33333333%;
}

.col-md-pull-0 {
    right: auto;
}

.col-md-push-12 {
    left: 100%;
}

.col-md-push-11 {
    left: 91.66666667%;
}

.col-md-push-10 {
    left: 83.33333333%;
}

.col-md-push-9 {
    left: 75%;
}

.col-md-push-8 {
    left: 66.66666667%;
}

.col-md-push-7 {
    left: 58.33333333%;
}

.col-md-push-6 {
    left: 50%;
}

.col-md-push-5 {
    left: 41.66666667%;
}

.col-md-push-4 {
    left: 33.33333333%;
}

.col-md-push-3 {
    left: 25%;
}

.col-md-push-2 {
    left: 16.66666667%;
}

.col-md-push-1 {
    left: 8.33333333%;
}

.col-md-push-0 {
    left: auto;
}

.col-md-offset-12 {
    margin-left: 100%;
}

.col-md-offset-11 {
    margin-left: 91.66666667%;
}

.col-md-offset-10 {
    margin-left: 83.33333333%;
}

.col-md-offset-9 {
    margin-left: 75%;
}

.col-md-offset-8 {
    margin-left: 66.66666667%;
}

.col-md-offset-7 {
    margin-left: 58.33333333%;
}

.col-md-offset-6 {
    margin-left: 50%;
}

.col-md-offset-5 {
    margin-left: 41.66666667%;
}

.col-md-offset-4 {
    margin-left: 33.33333333%;
}

.col-md-offset-3 {
    margin-left: 25%;
}

.col-md-offset-2 {
    margin-left: 16.66666667%;
}

.col-md-offset-1 {
    margin-left: 8.33333333%;
}

.col-md-offset-0 {
    margin-left: 0%;
}

}

@media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }

.col-lg-12 {
    width: 100%;
}

.col-lg-11 {
    width: 91.66666667%;
}

.col-lg-10 {
    width: 83.33333333%;
}

.col-lg-9 {
    width: 75%;
}

.col-lg-8 {
    width: 66.66666667%;
}

.col-lg-7 {
    width: 58.33333333%;
}

.col-lg-6 {
    width: 50%;
}

.col-lg-5 {
    width: 41.66666667%;
}

.col-lg-4 {
    width: 33.33333333%;
}

.col-lg-3 {
    width: 25%;
}

.col-lg-2 {
    width: 16.66666667%;
}

.col-lg-1 {
    width: 8.33333333%;
}

.col-lg-pull-12 {
    right: 100%;
}

.col-lg-pull-11 {
    right: 91.66666667%;
}

.col-lg-pull-10 {
    right: 83.33333333%;
}

.col-lg-pull-9 {
    right: 75%;
}

.col-lg-pull-8 {
    right: 66.66666667%;
}

.col-lg-pull-7 {
    right: 58.33333333%;
}

.col-lg-pull-6 {
    right: 50%;
}

.col-lg-pull-5 {
    right: 41.66666667%;
}

.col-lg-pull-4 {
    right: 33.33333333%;
}

.col-lg-pull-3 {
    right: 25%;
}

.col-lg-pull-2 {
    right: 16.66666667%;
}

.col-lg-pull-1 {
    right: 8.33333333%;
}

.col-lg-pull-0 {
    right: auto;
}

.col-lg-push-12 {
    left: 100%;
}

.col-lg-push-11 {
    left: 91.66666667%;
}

.col-lg-push-10 {
    left: 83.33333333%;
}

.col-lg-push-9 {
    left: 75%;
}

.col-lg-push-8 {
    left: 66.66666667%;
}

.col-lg-push-7 {
    left: 58.33333333%;
}

.col-lg-push-6 {
    left: 50%;
}

.col-lg-push-5 {
    left: 41.66666667%;
}

.col-lg-push-4 {
    left: 33.33333333%;
}

.col-lg-push-3 {
    left: 25%;
}

.col-lg-push-2 {
    left: 16.66666667%;
}

.col-lg-push-1 {
    left: 8.33333333%;
}

.col-lg-push-0 {
    left: auto;
}

.col-lg-offset-12 {
    margin-left: 100%;
}

.col-lg-offset-11 {
    margin-left: 91.66666667%;
}

.col-lg-offset-10 {
    margin-left: 83.33333333%;
}

.col-lg-offset-9 {
    margin-left: 75%;
}

.col-lg-offset-8 {
    margin-left: 66.66666667%;
}

.col-lg-offset-7 {
    margin-left: 58.33333333%;
}

.col-lg-offset-6 {
    margin-left: 50%;
}

.col-lg-offset-5 {
    margin-left: 41.66666667%;
}

.col-lg-offset-4 {
    margin-left: 33.33333333%;
}

.col-lg-offset-3 {
    margin-left: 25%;
}

.col-lg-offset-2 {
    margin-left: 16.66666667%;
}

.col-lg-offset-1 {
    margin-left: 8.33333333%;
}

.col-lg-offset-0 {
    margin-left: 0%;
}

}

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; display: table; }

.clearfix:after, .container:after, .container-fluid:after, .row:after { clear: both; }

O trecho abaixo é opcional, mas aqui tive que usar para deixar alguns componentes do primefaces renderizados corretamente:

[class*="col"] .ui-selectonemenu-label{
    width:100% !important;
}
[class*="col"] .ui-selectonemenu{
    width:100% !important;
}
[class*="col"] input {
    width: 100%;
}
[class*="col"] button {
    width: 100%;
}
[class*="col"] .ui-autocomplete {
    width: 100%;
}
[class*="col"] textarea {
    width: 100%;
}
[class*="col"] .ui-autocomplete-input {
    width: calc(100% - 20px);
}
[class*="col"] .ui-autocomplete-dropdown {
    width: 20px;
}
2

Essa pergunta se tornou bastante popular, então após todo esse tempo estou adicionando uma sugestão a qual é a solução atual para o problema. A não ser que você queira fazer no braço mediante as várias tentativas aqui propostas (desde já agradeço a todos) o mais sensato seria USAR BOOTSFACES , esse framework se propõe a fazer exatamente isso, permitir o uso harmonioso de Bootstrap e Primefaces, extraindo as potencialidades específicas de cada um. Peço a quem interessar dar uma olhadinha em WWW.BOOTSFACES.NET

1
  • Então essa biblioteca substitui o bootstrap e o primefaces ou apenas o bootstrap?
    – Krismorte
    Commented 13/06/2017 às 2:56
1

Se você está usando o Bootstrap somente pelo visual, você pode usar o tema Bootstrap do PrimeFaces: http://blog.primefaces.org/?p=2139

Para ativar o tema Bootstrap, modifique os seguintes arquivos (supondo que você está usando Maven):

pom.xml:

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

web.xml:

<context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>bootstrap</param-value>
</context-param>
2
  • Eu sei @rodrigorgs, repare que já estou usando o tema do bootstrap no primefaces na figura, estou usando o bootstrap mais por causa do Grid System porém quero usar os componentes do primefaces também sem que haja essa interferência ou que ele se comporte como um componente do primefaces normal só que seguindo o grid system... Commented 13/12/2013 às 12:22
  • Ok, achei que você tivesse integrado o Bootstrap por fora.
    – rodrigorgs
    Commented 13/12/2013 às 12:52
0

Você esta utilizando as classes do 3 para definir as colunas. Se não me engano a versão do utilizado pelo Primefaces é a versão 2. Nesse caso, você deve utilizar as classes span3, span4, span12 para definir as colunas.

0

O ideal nesse caso é desativar o theme do Primefaces no web.xml:

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

A partir daí você cria um novo theme customizado seguindo os passos deste link:

http://www.mkyong.com/jsf2/primefaces/create-a-custom-theme-in-primefaces/

0

Tente isto no css. Funcionou comigo.

/* Primefaces utiliza content-box, e o bootstrap modifica para border-box */

[class^="ui-"] {
       box-sizing: content-box !important;
}
-6

Tente isso:

<script type="text/javascript">
    var j = jQuery.noConflict();
    // Do something with jQuery
    j("div p").hide();
    // Do something with another library's $()
    $("content").style.display = 'none';
</script>
1
  • 7
    Bem-vindo ao Stack Overflow em Português! A comunidade está sempre receptiva a novos usuários que queriam contribuir com perguntas e respostas. Porém, não se assuste com os votos negativos que sua pergunta recebeu. O problema é que ela não responde adequadamente à pergunta, nem ajuda o autor. Você é livre para remover sua resposta ou mesmo tentar melhorá-la. E fique à vontade para responder outras perguntas, apenas observando se você está realmente respondendo o que está sendo perguntado.
    – utluiz
    Commented 10/07/2014 às 14:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .