CODEWITHSUNDEEP
cssxpagesradio-group
Chris Richards
Chris Richards

Reputation: 705

Xpages radio group label placement

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>

Upvotes: 1

Views: 200

Answers (2)

Knut Herrmann
Knut Herrmann

Reputation: 30970

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

enter image description here

Upvotes: 4

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15739

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

Upvotes: 0

Related Questions