Override CSS Component Primefaces

Question

I’m using the component calendar of Primefaces, but I’m having a hard time overwriting CSS of the same. Follow my code on 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 I’m setting a style style="width: 50% !important" which is not applied, and the two components calendar are below each other.

Obs: the CSS col one is p next:

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

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

Answer 2

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

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

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

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

and that I ended up having to customize the first column (because I was breaking the layout) in this way:

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

Answer 3

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

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