XPages - 设置字段集/图例标签的样式答案

【问题标题】：XPages - styling a fieldset/legend tagXPages - 设置字段集/图例标签的样式
【发布时间】：2014-07-22 01:52:02
【问题描述】：

我正在试验一些我在网上找到的字段集设计，并尝试在 XPages 中实现它们。

我的 XPages 应用程序使用 oneUI V2.1 主题。我正在通过 XPages 资源部分加载自定义 css 文件。我已经在其中添加了字段集和图例标签的类，但它们似乎没有被占用。

如果我将其设置为内联样式，则效果很好，因此我知道它是如何在 CSS 文件中定义的，或者我是如何调用它的。

会有人这么好心指出我的错误吗？我的源代码如下：

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>

自定义控件：

<?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;
}

【问题讨论】：

不知道xpage，但您无需编写如此复杂的CSS 来设置fieldset 和legend 的样式。检查示例。 jsbin.com/zenuheqo/1/edit

标签： css xpages fieldset

【解决方案1】：

将 styleClass 更改为 class（因为您是直接编写 HTML 而不是 XPages XML）。所以改为这样做：

<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>

【讨论】：

谢谢每。就是这样。在它真正起作用之前，我还必须将 Css 类更改为 lotusForm。