rich:calendar : 被其他组件隐藏的图标答案

【问题标题】：rich:calendar : Icon hidden by an other componentrich:calendar : 被其他组件隐藏的图标
【发布时间】：2013-05-29 14:47:57
【问题描述】：

如何保持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;
}

【问题讨论】：

能贴出这部分相关的视图代码吗？
使用margin，因为它很可能是纯 CSS 问题。
@AlexandreLavoie 我编辑了帖子；）
@skuntsel 我尝试使用margin-right，但我遇到了同样的问题！
在 Firebug 中打开渲染视图并在所需区域周围使用 CSS 以了解要更改的内容。

标签： jsf richfaces

【解决方案1】：

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

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

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

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

【讨论】：