Skip to main content
Commonmark migration
Fonte Link

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][1]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? [1]: https://i.sstatic.net/6DRoY.png

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][1]

O estilo do primefaces é alterado mesmo que eu tire a styleClass="form-control", haveria alguma forma de conviverem os dois em harmonia? [1]: https://i.sstatic.net/6DRoY.png

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?

edited tags
Link
Maniero
  • 484,4mil
  • 94
  • 1,3mil
  • 2,2mil
edited tags
Link
Maniero
  • 484,4mil
  • 94
  • 1,3mil
  • 2,2mil
added 32 characters in body
Fonte Link
Kenny Rafael
  • 6,7mil
  • 3
  • 31
  • 60
Carregando
Titulo reduzido para mostrar o foco do que realmente deseja.
Link
Carregando
Fonte Link
Carregando