0

Estou utilizando o componente calendar do Primefaces, porém estou com dificuldade para sobrescrever o CSS do mesmo. Segue meu código no xhtml:

<h:panelGrid columns="2" columnClasses="col one, col one">
                <h:outputLabel value="Data Início:"
                    styleClass="label" style="width: 50% !important" />
                <h:outputLabel value="Data Fim:"
                    styleClass="label" style="width: 50% !important" />

                <p:calendar pattern="dd/MM/yyyy" mode="popup" required="true"
                            showOn="button" popupIconOnly="true"
                            value="#{bean.entidade.dataIni}" locale="pt_BR"
                            showButtonPanel="false" readonlyInput="true"
                            maxlength="10" />

                <p:calendar pattern="dd/MM/yyyy" mode="popup" required="true"
                            showOn="button" popupIconOnly="true"
                            value="#{bean.entidade.dataFim}" locale="pt_BR"
                            showButtonPanel="false" readonlyInput="true"
                            maxlength="10" />
            </h:panelGrid>

Meu problema está em que estou setando um estilo style="width: 50% !important" que não é aplicado, e os dois componentes calendar ficam um abaixo do outro.

Obs: o CSS col one é p seguinte:

.col.one,.col.one * {
    width: 900px;
}

3 Respostas 3

1

O componente calendar tem o atributo size, la você pode alterar o tamanho do input que é gerado pelo componente. Exemplo:

<p:calendar pattern="dd/MM/yyyy" mode="popup" required="true" showOn="button" popupIconOnly="true" value="#{bean.entidade.dataIni}" locale="pt_BR" showButtonPanel="false" readonlyInput="true" maxlength="10" size="30"/>

2
  • Como? Poderia dar exemplos? Commented 29/01/2015 às 4:15
  • Obrigado pelo exemplo, porém eu já utilizava ambos e não havia resolvido no meu caso.
    – WyllianNeo
    Commented 29/01/2015 às 11:52
0

Para deixá-los lado a lado, você pode usar floats:

style="width: 50% !important; float:left !important"
1
  • Opa, tentei utilizar isso antes mesmo de postar a dúvida, porém não resolveu.
    – WyllianNeo
    Commented 29/01/2015 às 10:40
0

Encontrei a solução para esse caso alterando o meu panelGrid para este:

<h:panelGrid columns="2" width="100%" columnClasses="col two manuaisPratica,col two" >

onde o col one e col two é facil de alterar/sobrescrever pelo style dos componentes internos, o problema estava no CSS padrão

.col.two:FIRST-CHILD {
    padding-right: 20px;
}
.col.two * {
    /*width: 440px;*/
    width: 348px;
}

e que acabei tendo que customizar a primeira coluna(pois estava quebrando o leiaute) dessa forma:

.col.two.manuaisPratica
{
    width:50% !important;
}

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 .