How to arrange Radio buttons horizontally in CQ Dialog?

[pradeepdubey82]

Hi Team,

I have to arrange radio buttons(3 radio buttons) horizontally in CQ dialog. How to do it?

I have added these buttons in dialog but showing vertically. Please help if anyone know how to achieve it. I have attached snapshot of the readiobuttons what is currently on CQ dialog.

Thanks,

Pradeep 

[Tuhin_Ghosh]

        Hi, There is a property called width in my reply. Please check if increasing that helps you. Thanks Tuhin

[Tuhin_Ghosh]

Hey Pradeep,

Any updates on this issue. If this still persists please make a package and share it with me. I would come back with the solution.

Thanks

Tuhin

[pradeepdubey82]

Hi Tuhin,

I am sharing dialog.xml here, tried putting width also, issue still persist. Try if you can debug it. Package i can't share as it is client specific.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog"
    title="Course Infographic"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <Text
            jcr:primaryType="cq:Widget"
            title="Text"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <certAccredOptions
                    jcr:primaryType="cq:Widget"
                    border="{Boolean}true"
                    fieldLabel="Certification and Accreditations Options"
                    name="./certAccredOptions1"
                    width="300"
                    xtype="fieldset">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <pradeep
                            jcr:primaryType="cq:Widget"
                            fieldLabel="Pradeep"
                            layout="column"
                            width="500"
                            xtype="container">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <countryReputation
                                    jcr:primaryType="cq:Widget"
                                    columns="{Long}3"
                                    name="./examTimeUnits"
                                    type="radiogroup"
                                    vertical="{Boolean}false"
                                    width="150"
                                    xtype="selection">
                                    <options jcr:primaryType="cq:WidgetCollection">
                                        <radiobutton1
                                            jcr:primaryType="cq:Widget"
                                            text="good"/>
                                        <radiobutton2
                                            jcr:primaryType="cq:Widget"
                                            text="bad"/>
                                        <radiobutton3
                                            jcr:primaryType="cq:Widget"
                                            text="average"/>
                                    </options>
                                </countryReputation>
                            </items>
                        </pradeep>
                        <dilip
                            jcr:primaryType="cq:Widget"
                            fieldLabel="Dilip"
                            layout="column"
                            width="500"
                            xtype="container">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <countryReputation
                                    jcr:primaryType="cq:Widget"
                                    columns="{Long}3"
                                    name="./examTimeUnits1"
                                    type="radiogroup"
                                    vertical="{Boolean}false"
                                    width="150"
                                    xtype="selection">
                                    <options jcr:primaryType="cq:WidgetCollection">
                                        <radiobutton1
                                            jcr:primaryType="cq:Widget"
                                            text="good"/>
                                        <radiobutton2
                                            jcr:primaryType="cq:Widget"
                                            text="bad"/>
                                        <radiobutton3
                                            jcr:primaryType="cq:Widget"
                                            text="average"/>
                                    </options>
                                </countryReputation>
                            </items>
                        </dilip>
                    </items>
                </certAccredOptions>
            </items>
        </Text>
    </items>
</jcr:root>

[Tuhin_Ghosh · Accepted solution]

Hi Pradeep,

Please try this below code. It should work. Just add one optionconfig.

<tuhin
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Radio"
                    layout="column"
                    xtype="container">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <radio
                            jcr:primaryType="cq:Widget"
                            align="strech"
                            fieldLabel="radio"
                            layout="hbox"
                            name="./examTimeUnits1"
                            type="radiogroup"
                            width="200"
                            xtype="selection">
                            <options jcr:primaryType="cq:WidgetCollection">
                                <radiobutton1
                                    jcr:primaryType="cq:Widget"
                                    text="good"
                                    value="good"/>
                                <radiobutton2
                                    jcr:primaryType="cq:Widget"
                                    text="bad"
                                    value="good"/>
                                <radiobutton3
                                    jcr:primaryType="cq:Widget"
                                    text="average"
                                    value="good"/>
                            </options>
                            <optionsConfig
                                jcr:primaryType="nt:unstructured"
                                width="50"/>
                        </radio>

Thanks

Tuhin

[pradeepdubey82]

Awesome... solution worked.

[Tuhin_Ghosh]

Could you then please mark it as solved?

Thanks

Tuhin

[pradeepdubey82]

Tuhin Ghosh wrote...

Could you then please mark it as solved?

Thanks

Tuhin

It is already marked as Solved by you i guess.

[Tuhin_Ghosh]

pradeepdubey82@gmail.com wrote...

Tuhin Ghosh wrote...

Could you then please mark it as solved?

Thanks

Tuhin

It is already marked as Solved by you i guess.

No, someone else may be. I dont have that access to mark a question solved started by someone else. Anyways I am happy that its done.

Thanks

Tuhin