Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Estilo dataTable

Referente ao curso Java e JSF 2 - II: Componentes ricos com Primefaces

por Bruno Pereira Passos
| 162.8k xp | 42 posts

Tudo bem pessoal ?

Preciso colocar estilo em minha dataTable, porém por enquanto eu conseguir apenas mudar a cor da fonte... mas preciso qe o backgroud-color seja ajustado com a cor que eu quero...

Segue codigo

CSS

.quartoPreenchido{
    color: red !important;
    background-color: #00FFFF !important;
}

obs: esse background-color não é mostrado... Aparentemente existe um background padrao da dataTable, porem nao consigo tirar esse padrao...

XHTML

<p:dataTable id="homeList" value="#{homeListCredenciamento.listInscricaoPessoaView}"
                             var="ip" rows="10" paginator="true" style="width: 1170px"
                             rowStyleClass="#{ip.quartoView.tipoQuarto.label != null ? 'quartoPreenchido' : null}"
                             paginatorPosition="bottom"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10,15,25,50,100,200"
                             emptyMessage="Não existem registros"
                             rendered="#{segurancaController.hasRole('DETI,SUP_CREDENCIAMENTO')}">
3 respostas
por Osmar Filho
| 850.8k xp | 17 posts

Bruno,

Eu usei o "inspecionar elemento" do chrome para saber quais classes do primefaces eu precisaria alterar para deixar o meu estilo dos botões de paginação, mensagens, etc...

Segue abaixo alguns exemplos.


.ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-pages, 
.ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-last, 
.ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev, 
.ui-paginator .ui-paginator-current {
    margin-left: 0!important;
    margin-right: 0!important;
}

.ui-paginator-pages {
    padding-left: 0!important;
    padding-right: 0!important;
}

.ui-corner-all {
    border-radius: 0!important;
}

.ui-messages-info-summary::before{
    content: "\f05a"; 
    font-family: FontAwesome;
    font-size: 1.2em;
    padding-right: 10px;
}

Utilizei também a documentação oficial para resolver alguns problemas.

Dá uma olhada em https://www.primefaces.org/docs/guide/primefaces_user_guide_6_2.pdf

Espero ter ajudado.

solução!
por Bruno Pereira Passos
| 162.8k xp | 42 posts

Então amigo muito obrigado por enquanto, porém as classes eu conseguir identificar sim e até consigo mudar o style delas... Porém não consigo colocar as condições que eu quero nesta linha de codigo

rowStyleClass="#{ip.quartoView.tipoQuarto.label != null ? 'quartoPreenchido' : null}"

se olhar no codigo a "var" está declarada, porém não consigo fazer com que seja respeitada esta condição

por Osmar Filho
| 850.8k xp | 17 posts

Bruno,

Tentou fazer o tratamento via bean? Já trazendo o resultado de um método. Por exemplo

#{ip.quartoView.estilo}.

Ou no pior dos casos em javascript. Pegando o elemento e atribuindo a classe a ele.