Размещение ярлыка радиогруппы Xpages

Question

Кажется так просто, но я не могу это взломать. Все, что я хочу, это метка каждого значения в группе радиокнопок, отображаемая над каждой радиокнопкой ..... Пробовал несколько вещей с 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>

Answer 1

Окружите свою группу радиокнопок панелью и классом "label-over"

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

Это покажет метки над переключателями

Answer 2

Один из вариантов - создать пользовательский рендер. Подробная информация о том, как это сделать для радиогруппы, приведена здесь comboBox генерирует таблицу вместо диапазона в режиме чтения в сети