XPages - styling a fieldset/legend tag

Question

I'm experimenting with some fieldset designs that I found online and trying to implement them in XPages.

My XPages app is using the oneUI V2.1 theme. I'm loading a custom css file via the XPages Resources section. I've added the class for the fieldset and legend tags in there but they do not seem to be taking.

If I style it inline, it works great so I know its either how I've defined it in the CSS file or how I'm calling it.

Would someone be so kind and point out my mistake? My source code follows:

XPages:

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
    <xp:styleSheet href="/phc.css"></xp:styleSheet>
</xp:this.resources>
<xc:cc_fieldset legendText="My first legend">
    <xp:this.facets>
        <xp:panel xp:key="facetFieldSetContent">
            <xc:cc_incident></xc:cc_incident>
        </xp:panel>
    </xp:this.facets>
</xc:cc_fieldset>
</xp:view>

Custom Control:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">

<!--  fieldset style="border-radius: 5px; padding: 5px; min-height:150px; border:8px solid #1f497d; background-color:#eeece1;"-->
    <!--  legend style=" margin-left:20px;background-color:#1f497d; padding-left:10px; padding-top:5px; padding-right:120px; padding-bottom:5px; ; color:white; border-radius:15px; border:8px solid #eeece1; font-size:40px;" -->
    <section>
    <fieldset styleClass="lotusTable fieldset"> 
        <legend styleClass = "lotusTable fieldset legend">
        <xp:text escape="false" id="legendText"
            value="#{javascript:compositeData.legendText}">
        </xp:text>
    </legend>
    <xp:callback facetName="facetFieldSetContent"
        id="callbackFieldControlSet" />
    </fieldset>
    </section>

CSS:

.lotusTable fieldset {
font-family: sans-serif;
border: 5px solid #1F497D;
background: #ddd;
}

.lotusTable fieldset legend {
background: #1F497D;
color: #fff;
padding: 5px 10px ;
font-size: 32px;
border-radius: 5px;
box-shadow: 0 0 0 5px #ddd;
margin-left: 20px;
}

don't know about xpage but you no need to write a so complex CSS to style the fieldset and legend. check the example. jsbin.com/zenuheqo/1/edit — Kheema Pandey

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2014-07-22T05:10:12

Change styleClass to class (since you are writing HTML directly and not XPages XML). So do this instead:

<section>
<fieldset class="lotusTable fieldset"> 
    <legend class="lotusTable fieldset legend">
    <xp:text escape="false" id="legendText"
        value="#{javascript:compositeData.legendText}">
    </xp:text>
</legend>
<xp:callback facetName="facetFieldSetContent"
    id="callbackFieldControlSet" />
</fieldset>
</section>

XPages - styling a fieldset/legend tag

1 Answers