This question has been flagged
11 Replies
16762 Views

I have  around 12 radio button options in my custom form , its bit ugly to scroll and input the values for this options,

how do i arrange the radio buttons horizontally ? Any tips or tricks to achieve this ?

Avatar
Discard

You could either do this with a group which you add colspan and rowspan on or with a simple HTML table, in which you put all the radiobuttons.

Best Answer

Hi Nishad,

Please use attribute widget="radio" options="{'horizontal': true}" in your radio buttons.
Hope this will helps you

Cheers !

Avatar
Discard
Author Best Answer

Thanks for your comments Emipro Technologies.. You are right ... but the scenario is something different like as follows,

i have a field 

'f1': fields.selection([('1', '1'),('2', '2'),('3','3'),('4','4'),('5','5'),('6','6'),('7','7'),('8','8'),('9','9'),('10','10')], 'Communication Skills'),

similarly 11 more other fields like f2,f3, etc... and in my view.xml am making it like 

<group colspan="4" col="24">
<field name="f1" widget="radio"/>
<field name="f2" widget="radio"/>
.
.
</group>

The above alignment keep individual filelds in horizontal but the options in vertical order ..

So how do i align my selection options in horizontal ? 

Thanks...

Avatar
Discard

Hello Please have a look in update of my answer.

Author

Hi , That's still didn't work as i expected ! Basically the issue is my fields are selection fields and i think we cant align selection field entries horizontally.. Am giving widget="radio" for my selection field entries ..

can you paste your code or xml and screen of its output ? Will help you more on that.

Author

My .py file has fields as follows, 'q1': fields.selection([('1', '1'),('2', '2'),('3','3'),('4','4'),('5','5'),('6','6'),('7','7'),('8','8'),('9','9'),('10','10')], 'Overall Experience'), 'q2': fields.selection([('1', '1'),('2', '2'),('3','3'),('4','4'),('5','5'),('6','6'),('7','7'),('8','8'),('9','9'),('10','10')], 'Communication Skills'), .. .. .xml file has alignment as follows, This will display the field vertically not in horizontal way( I can't attach my image here ...... )

Author

.xml file has fields as you suggested

Best Answer

horizontal radio button in odoo

Use your field f1 like this,

<field name="f1" widget='radio' options="{'horizontal': true}"/>
Avatar
Discard
Best Answer

Hi Nishad,

You have to manage columns inside group to achieve your goal for manage 12 radio buttons horizontally. For ex.

<group colspan="4" col="24">
<field name="radio_field1" />
<field name="radio_field2" />
<field name="radio_field3" />
<field name="radio_field4" />
<field name="radio_field5" />
<field name="radio_field6" />
<field name="radio_field7" />
<field name="radio_field8" />
<field name="radio_field9" />
<field name="radio_field10" />
<field name="radio_field11" />
<field name="radio_field12" />
</group>

As above  colspan="4" means merge 4 columns, default Odoo seperated all group in 4 coulmns. And col="24" means create 24 columns after merge those 4 columns and all 12 radio button will fit inside it.

It may help a lot.

Update : 
You can manage as like below.

<group colspan="4" col="10">
    <field name="radio_field1" />
</group>
<group colspan="4" col="10">    
    <field name="radio_field2" />
</group>
 
...
...
<group colspan="4" col="10">
<field name="radio_field12" />
</group>

I think you will get radio options as you want.

Avatar
Discard