Xpages 单选组标签放置答案

【问题标题】：Xpages radio group label placementXpages 单选组标签放置
【发布时间】：2019-02-09 16:10:23
【问题描述】：

看起来很简单，但我无法破解它。我想要的只是单选按钮组中每个值的标签，以显示在每个单选按钮上方.....用 CSS 尝试了一些东西，但目前还没有雪茄，所以任何指针都将不胜感激。

我在自定义控件中使用复合数据对象传递值

<xc:ccQuestionInterimRadios required="true"
    dataSource="#{document1}" fieldName="test"
    helpText="Please select an answer"
    placeholder="Enter any further details here..."
    questionHeader="primary" questionTextNJD="QuestionTextNJD"
    questionText="Question text goes here">
<xc:this.radioOptions><![CDATA[#{javascript:return ['1', '2', '3', '4', '5'];}]]></xc:this.radioOptions>
</xc:ccQuestionInterimRadios>

并且值被传递为：

<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:compositeData.radioOptions}]]></xp:this.value>
</xp:selectItems>

输出的 HTML 是：

<label for="view:_id1:_id2:_id45:_id46:radioGroupOptions:0">
<input type="radio" id="view:_id1:_id2:_id45:_id46:radioGroupOptions:0" name="view:_id1:_id2:_id45:_id46:radioGroupOptions" value="1">
1
</label>

【问题讨论】：

标签： css xpages radio-group

【解决方案1】：

用面板和“label-above”类围绕您的单选按钮组

<xp:panel
    styleClass="label-above">
    <xp:radioGroup
        id="radioGroup1"
        value="#{sessionScope.test}">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{javascript:["aaa", "bbb", "ccc"]}]]></xp:this.value>
        </xp:selectItems>
    </xp:radioGroup>
</xp:panel>

并将以下条目添加到您的样式表中：

.label-above {
    height: 35px;
}

.label-above label {
    position: relative;
}

.label-above label input {
    position: absolute;
    top: 15px;
}

这将显示单选按钮上方的标签

【讨论】：

嗨克努特，谢谢你，我上周忘记发表评论了，但我还没有尝试一下，因为我被拉到了别的东西上，但会重新访问并让你知道它是如何进行的一次我试试。干杯
@Chris：你能让它运行吗？
抱歉，要求消失了，但是我刚刚使用您的解决方案进行了快速测试，它运行良好。谢谢

【解决方案2】：

一种选择是创建自定义渲染器。有关如何为广播组执行此操作的详细信息，请点击此处comboBox generates a table instead of span in readmode web

【讨论】：