Xpages radio group label placement

Question

Seems so simple, but I can't crack it. All I want, is the label of each value in a radio button group to display above each radio button..... Tried a few things with CSS but no cigar as of yet, so any pointers would be appreciated.

I pass values using composite data objects in my custom control

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

And the values get passed as:

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

Outputted HTML is:

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

Knut Herrmann · Accepted Answer · 2018-09-06T20:36:52.147

4

Surround your radio button group with a panel and a class "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>

and add following entries to your style sheet:

.label-above {
    height: 35px;
}

.label-above label {
    position: relative;
}

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

This will show the labels above the radio buttons

edited Sep 06 '18 at 20:36

answered Sep 06 '18 at 20:25

Knut Herrmann

30,880
4
31
67

1

Hi Knut, thanks for this, I forget to comment last week but I've yet to give it a go as I got pulled onto something else, but will revisit and let you know how it goes once I try. Cheers – Chris Richards Sep 10 '18 at 15:25
@Chris: and, could you get it to run? – Knut Herrmann Oct 09 '18 at 17:56
1

apologies, the requirement went away, however I have just done a quick test using your solution and it works perfectly. Thanks – Chris Richards Oct 10 '18 at 10:31

score 0 · Answer 2 · answered Sep 06 '18 at 13:53

0

One option would be to create a custom renderer. Details of how to do that for a radio group are here comboBox generates a table instead of span in readmode web

answered Sep 06 '18 at 13:53

Paul Stephen Withers

15,699
1
15
33

Xpages radio group label placement

2 Answers2