rich：calendar：由其他组件隐藏的图标

Question

如何为rich:calendar组件显示图标？

我需要添加另一个rich:calendar组件，但outputLabel会隐藏图标。

代码（已编辑）：

                        <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

我唯一可以看到有可能导致问题的是columnClasses中"titreColonne,,,titreCourtColonne,,"的类顺序，您现在更改为"titreColonne,,titreCourtColonne,"。

以前，您尝试在rich:calendar列上应用40px宽度（ titreCourtColonne ）位于第二个rich:calendar列，而不是 au 列）。

我建议更改此CSS以获得更好的样式：

.titreCourtColonne {
    text-align: center;
    white-space: nowrap;
    width: 20px;
}