Overwrite CSS component calendar Primefaces

Question

Overwrite CSS component calendar Primefaces

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I'm using the calendar component of Primefaces , but I'm having trouble overwriting CSS of it. Here is my code in 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>

My problem is that I am setting a style="width: 50% !important" style that is not applied, and the two calendar components are one below the other.

Note: CSS col one is following:

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

css primefaces

asked by anonymous 28.01.2015 / 20:17

3 answers

1

The calendar component has the size attribute, you can change the size of the input that is generated by the component. Example:

<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"/>

28.01.2015 / 21:06

0

To leave them side by side, you can use floats :

style="width: 50% !important; float:left !important"

28.01.2015 / 20:33

Running script on XP machines Demoiselle-Nimble: Error generating CRUD Vaadin

score 0 · Accepted Answer

I found the solution for this case by changing my panelGrid to this:

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

where col one and col two is easy to change / override by style of internal components, the problem was in CSS default

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

and I ended up having to customize the first column (because it was breaking the layout):

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