I'm using a calendar component but only the date (omitting the time), and overwriting CSS to reduce the screen size. Follow below:
<rich:calendar value="#{_sessao.dtSessao}" showFooter="false" enableManualInput="true" locale="pt_BR" datePattern="dd/MM/yyyy" style="width:80px;"/>
However, you are not applying.
As far as I know, in JSF , Primefaces and similar, that's right.
I found the solution, which was relatively simple, but since I do not use Richfaces I had to see the components it contains.
Instead of using:
<rich:calendar ... style="width:80px;"/>
I checked that there is the inputStyle tag that solved directly in the component, just as style does in JSF , then:
><rich:calendar ... inputStyle="width:80px;"/>
I've checked and there are other similar cases in Richfaces, so it's interesting to check each component as the solution might look similar.
The ideal friend was to do this script modification in a css. This component generates several HTML codes for this purpose.
Take a look at the documentation and check the part you want to change the style.
Also check applied styles if you have no other styles being overwritten.
Remember css with! important takes precedence over style styles.
Having the calendar
<rich:calendar value="#{calendarBean.selectedDate}" id="calendar" locale="#{calendarBean.locale}"
popup="#{calendarBean.popup}" datePattern="#{calendarBean.pattern}"
showApplyButton="#{calendarBean.showApply}" cellWidth="24px" cellHeight="22px"
style="width:200px" disabled="#{calendarBean.disabled}">
</rich:calendar>
And a font change css:
.rich-calendar-tool-btn {
font-family: Arial, Verdana;
}