Question

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

我的XPage应用正在使用oneUI V2.1主题。我正在通过XPages Resources部分加载自定义css文件。我在那里添加了fieldset和legend标签的类，但它们似乎没有采取。

如果我将其设置为内联样式，它的效果很好，所以我知道它是如何在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;
}

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

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

1 个答案: