rich:calendar : Icon hidden by an other component - jsf

Question

How can I keep icon shown for rich:calendar component?
I need to add another rich:calendar component, but the outputLabel hide the icon.
Code (edited) :
<h:panelGrid columns="4" styleClass="criteresSaisie"
rowClasses="critereLigne"
columnClasses="titreColonne,,titreCourtColonne,">
<h:outputLabel for="dateDeb" value="Période du" />
<rich:calendar id="dateDeb" inputSize="8"
value="#{criteresDecRgltBacking.dtDebDecRglt}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true" converterMessage="la date de début doit être au format dd/MM/yyyy">
<rich:validator/>
</rich:calendar>
<h:outputLabel for="dateFin" value="au" style="margin-left:20px;"/>
<rich:calendar id="dateFin" inputSize="8"
value="#{criteresDecRgltBacking.dtFinDecRglt}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true" converterMessage="la date de fin doit être au format dd/MM/yyyy" >
<rich:validator/>
</rich:calendar>
<f:event type="postValidate"
listener="#{rechercheDecRgltCtrl.validationPeriode}" />
</h:panelGrid>
CSS
div.rf-ac-itm {
height: auto !important;
overflow: visible;
}
div.rf-ac-itm-cnt {
height: auto !important;
overflow: visible;
}
.critereLigneAugmente td {
padding-bottom: 0px;
}
.espaceVideCalendar {
width: 10px;
}
.espaceVide {
width: 20px;
}
.espaceColonne {
width: 30px;
}
.titreColonne {
text-align: right;
white-space: nowrap;
width: 180px;
}
.titreCourtColonne {
text-align: right;
white-space: nowrap;
width: 40px;
}
.titreColonne .libelle,.titreColonne label {
padding-right: 10px;
}
.titreColonne .libelle label {
padding-right: 0px;
}
.largeurFixeCriteres{
width: 120px;
overflow: visible;
}
.criteresSaisie {
margin: 10px;
}
.largeurFixeCriteresTiers {
width: 120px;
overflow: visible;
}
.critereLigneAugmente td {
padding-bottom: 0px;
}
.finDeLigne {
width: 0px;
}

Answer 1

The only thing I could see that have a chance to cause problem is the classes order in columnClasses that was "titreColonne,,,titreCourtColonne,," and you changed now to "titreColonne,,titreCourtColonne,".
Previously you where trying to apply a 40px width on a rich:calendar column (titreCourtColonne was on the second rich:calendar column instead of the au column).
I recommand to change this CSS for better styling :
.titreCourtColonne {
text-align: center;
white-space: nowrap;
width: 20px;
}