nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to place radio buttons horizantally?

vens

Hi,

We would like to know how to place radio buttons vertically and a text box adjacent to each correponding radio button.For example If i have a radio button with four options and four text boxes to be placed adjacent to correponding radio button.

Thanks & Regards,
Venu

Find more posts tagged with

Comments

Nidhi_Agrawal

Hi,

Use rowcontinue="t" property for item tag to put two items next to next and use rowcontinue="f" for making the item to be displayed on the next line.

Regards
Nidhi..

vens

HI,
Thanks for the update.

Our requirement is that we need to have an radio button with four options(all 4 options are part of same radio button item) and the options are to be placed vertical and 4 text boxes adjacent to corresponding 4 radio button options.

It is important that all 4 options of the radio button should be of same item.

The data capture form should look similar like shown below:

Select () case1 |Text Box1|

() case2 |Text Box2|

() case3 |Text Box3|

() case4 |Text Box4|

Thanks,
Venu

Nidhi_Agrawal

hi vens,

Hmnnn.. There is no direct functionality available of this type.
You need to make four diff radio buttons with 4 text boxes.
You can take the name of radio buttons as radio_1 , radio_2,.... _4.
You wud be req that at a time only one radio button is selected , for that u have to use formApI.
Inside a radio button u can not use tag , so that u have to define radio button and text box item individually.

Regards
Nidhi...

HI,
Thanks for the update.

Our requirement is that we need to have an radio button with four options(all 4 options are part of same radio button item) and the options are to be placed vertical and 4 text boxes adjacent to corresponding 4 radio button options.

It is important that all 4 options of the radio button should be of same item.

The data capture form should look similar like shown below:

Select () case1 |Text Box1|

() case2 |Text Box2|

() case3 |Text Box3|

() case4 |Text Box4|

Thanks,
Venu

milind

Hi Venu,

I think the UI design is not correct, If the radio button before a textbox is not selected then the text in that text box doesn't have any importance. Only the text in text box where radio button was selected should be considered.
Besides to this, you can not place radio buttons vertically.

Regards
Milind

HI,
Thanks for the update.

Our requirement is that we need to have an radio button with four options(all 4 options are part of same radio button item) and the options are to be placed vertical and 4 text boxes adjacent to corresponding 4 radio button options.

It is important that all 4 options of the radio button should be of same item.

The data capture form should look similar like shown below:

Select () case1 |Text Box1|

() case2 |Text Box2|

() case3 |Text Box3|

() case4 |Text Box4|

Thanks,
Venu

kaalraa

It is important that all 4 options of the radio button should be of same item.

If this is your requirment, then i am afraid to say that it is not possible. Logical reason for the same is to have the radio buttons within a single item should be one after another. (Only after that you can think off for layout of buttons)

Whereas in your case the mentioned GUI has the radio buttons as an alternate item.

Nidhi_Agrawal

Hi,

Vens ,i think milind is right. Better u can put 4 radio buttons , and one text box.The value of text box will be applicable to the radio button which is selected.This will be more easy to handle.

Regards
Nidhi...

Adam Stoller

I don't believe you can do what you want as a single item. I think what you're looking at here is four distinct radio-button fields with four distinct text fields - that will be tied together via FormAPI code so that they (might) appear as if they are all one item - or - as has been suggested - four radio buttons with a single associated text area - however I'm not sure whether you can get the layout you want that way. (you might, I'm just not sure and haven't tried it out)

kaalraa

I would suggest to Venu to elaborate more on his requirements so that anyone can provide him with better solution options.

akshathp

HI,
Thanks for the update.

Our requirement is that we need to have an radio button with four options(all 4 options are part of same radio button item) and the options are to be placed vertical and 4 text boxes adjacent to corresponding 4 radio button options.

It is important that all 4 options of the radio button should be of same item.

The data capture form should look similar like shown below:

Select () case1 |Text Box1|

() case2 |Text Box2|

() case3 |Text Box3|

() case4 |Text Box4|

Thanks,
Venu

In past I used LABEL property of RADIO tag to display radio buttons in vertical order. Here's what I did:

< radio>
< option value="yes" label="Yes < ; BR > ;"/>
< option value="no" label="No"/>
< /radio>

Note in the label for YES I have BR tag included. It will keep the same radio group and display them in vertical order.
Hope this helps!

kaalraa

Indeed a good hack!! However it fulfill the requirement to an extent as there would be no textbox after each radio button. However if text box would be put explicitly in between then the radio buttons would not be under same item.

In past I used LABEL property of RADIO tag to display radio buttons in vertical order. Here's what I did:

< radio>
< option value="yes" label="Yes < ; BR > ;"/>
< option value="no" label="No"/>
< /radio>

Note in the label for YES I have BR tag included. It will keep the same radio group and display them in vertical order.
Hope this helps!

RonaldV

I would discourage my teamsite-users in wanting this. The teamsite templating gui is not very flexible in this sense, at least that is how I feel it.

Sbardeo

Thanks Akshat!!!
It works! radio options are appearing vertically.