Within my fieldset, there is a legend structured as shown below:
<fieldset class="fieldsetStyle">
<legend class="fieldsetLegendStyle">
<div>
<h:outputText value="#{msgs.LABEL_AJOUTER_UTILISATEUR}"
rendered="#{gProfilCtrl.newUtilisateur}"/>
<h:outputText value="#{msgs.LABEL_MODIFIER_UTILISATEUR}"
rendered="#{!gProfilCtrl.newUtilisateur}"/>
</div>
</legend>
.
.
.
</fieldset>
After setting the overflow property to auto in my CSS file, the legend displays incorrectly. In Chrome browser, the top border disappears while Firefox and IE render it correctly.
Below is the CSS code I have used:
.fieldsetStyle {
height: calc(100% - 2px);
border: 1px solid #bed6f8;
margin-left: 5px;
padding: 0 0 0 30px;
width: calc(100% - 37px);
margin-right: 0px;
overflow: auto;
}
.fieldsetLegendStyle {
border: 1px;
border-style: solid;
border-color: #BED6F8;
min-width: 199px;
height: 25px;
padding-top: 10px;
margin-bottom: 20px;
}
Any suggestions or solutions to address this issue?
UPDATE
If I remove overflow:auto, my panel extends beyond the fieldset box.