XPages - 필드 집합/범례 태그 스타일 지정

Question

온라인에서 찾은 일부 필드 세트 디자인을 실험 중이며이를 XPage에서 구현하려고합니다.

내 XPages 앱이 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 (당신이 작성되기 때문에 HTML directl XPage XML이 아닌 y). 따라서 대신 다음을 수행하십시오 :

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