# How to organize radio buttons in separate lines?

**URL:** <https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041>\
**Category:** Coding Questions\
**Created:** [April 7, 2019, 5:22am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041 "2019-04-07T05:22:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![togo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/togo/32/4464_2.png) [@togo](https://discourse.processing.org/u/togo)\
**Post date:** [April 7, 2019, 5:22am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/1 "2019-04-07T05:22:30Z")

</div>

Hello,

I’m currently working on radio buttons.  
Right now, I have the following code.

```auto
gender = createRadio();
gender.option('male');
gender.option('female');
gender.option('prefer not to say');
gender.position(10, 30);

```

This gives me the following results.  
 ![11](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/396b65785e77324d69dc555bfe81b053ab1dec2c.png)

However, I want the radio buttons to appear in separate lines.  
I’ve tried working on using gender.position() and CSS but haven’t been successful.

Looking at the generated HTML, it would be so much easier if I could insert ul /ul li /li elements to the individual options of the radio button, but I haven’t figured out how to do this.

```auto
<div style="position: absolute; left: 10px; top: 30px;">
<input type="radio" value="male" name="defaultradio0" id="defaultradio0-0">
<label for="defaultradio0-0">male</label>

<input type="radio" value="female" name="defaultradio0" id="defaultradio0-1">
<label for="defaultradio0-1">female</label>

<input type="radio" value="prefer not to say" name="defaultradio0" id="defaultradio0-2">
<label for="defaultradio0-2">prefer not to say</label></div>

```

Would somebody be kind enough to tell me if there is a way to do this?

Thank you.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 6:36am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/2 "2019-04-07T06:36:07Z")

</div>

yes, very difficult when the text strings are very different in length,  
[https://editor.p5js.org/kll/sketches/4QNj9OrZ9](https://editor.p5js.org/kll/sketches/4QNj9OrZ9)

---

<div class="post-metadata">

**Author:** ![bhaskar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bhaskar/32/3949_2.png) [@bhaskar](https://discourse.processing.org/u/bhaskar)\
**Post date:** [April 7, 2019, 8:29am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/3 "2019-04-07T08:29:08Z")

</div>

Hi @togo, You can also use [select option](https://p5js.org/reference/#/p5/createSelect) , it is a good option and you doesn’t have care about the positions.

`

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 8, 2019, 1:32am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/4 "2019-04-08T01:32:51Z")

</div>

> [@togo](#):
>
> However, I want the radio buttons to appear in separate lines.

When we call [[u]p5[/u]::**createRadio()**](http://p5js.org/reference/#/p5/createRadio), 1st it merely calls [[u]p5[/u]::**createDiv()**](http://p5js.org/reference/#/p5/createDiv) internally and returns that for us:

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L829-L833>

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L889-L890>

It’s only when we call its **option()** method that it finally creates an `<input type="radio">`:

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L842-L844>

And its corresponding `<label for="radio's id">`:

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L852-L854>

And then returns the created `<input type="radio">` for us:

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L858-L859>

In short, all `<input type="radio">` + `<label for="radio's id">` pairs are wrapped up in 1 `<div>`.

The problem w/ that is that each `<input type="radio">` + `<label for="radio's id">` pair tries to accommodate themselves horizontally within their sole `<div>`'s available _width_.

In order to force each pair to occupy its own row we’d need to create a `<div>` container for each pair.

For that, I’ve made a function which does just that:

```javascript
function encloseEachInputLabelPairIntoASubDiv(radioDivElement) {
  const inputs = selectAll('input', radioDivElement),
        labels = selectAll('label', radioDivElement),
        len = inputs.length;

  for (let i = 0; i < len; ++i)
    createDiv().parent(radioDivElement).child(inputs[i]).child(labels[i]);
}

```

It grabs all `<input>` & `<label>` tag elements within the radio’s `<div>` via p5::**selectAll()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5/selectAll)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

And then loop over them as a pair each iteration, creating a `<div>` for each of them via p5::**createDiv()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5/createDiv)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

And making each of those new `<div>` elements a child of the radio’s parent `<div>` via p5.Element::**parent()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/parent)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Finally transferring the `<input>` & `<label>` pair into the new `<div>` via p5.Element::**child()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/child)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 8, 2019, 2:25am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/5 "2019-04-08T02:25:53Z")

</div>

It seems like all’s solved. But **encloseEachInputLabelPairIntoASubDiv()** introduces a serious bug! 🐛

Both methods **selected()** & **value()** stop working after **encloseEachInputLabelPairIntoASubDiv()**! 🤕

Both of them depend on a “hidden” method called **\_getInputChildrenArray()**: ㊙

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L860-L862>

  

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L874-L876>

  

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L835-L839>

The problem is that **\_getInputChildrenArray()** searches for `<input>` elements at radio’s `<div>` 1st inner level only.

However, after **encloseEachInputLabelPairIntoASubDiv()**, the 1st inner level got inner `<div>` containers only.

All `<input>` & `<label>` elements are now inside those inner `<div>` containers.

In order to fix the bug we’ve introduced, we need to replace **\_getInputChildrenArray()**'s current search code w/ a smarter 1 that recursively searches all descendants of the radio’s parent element: 🧙

> **[Element.getElementsByTagName()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)**
>
> The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name.

```javascript
function fixRadioDivElement(radioDivP5Element) {
  radioDivP5Element._getInputChildrenArray = function () {
    return this.elt.getElementsByTagName('input');
  }
}

```

Here’s the whole radio button sketch. You can see it online too on the link below: 🕶

> **[Create Vertical Radio Buttons](https://bl.ocks.org/GoSubRoutine/5b18d019959031f517fc218667faa688)**
>
> GoSubRoutine’s Block 5b18d019959031f517fc218667faa688

```javascript
/**
 * Create Vertical Radio Buttons (v1.0.1)
 * GoToLoop (2019-Apr-07)
 *
 * https://Discourse.Processing.org/t/
 * how-to-organize-radio-buttons-in-separate-lines/10041/5
 *
 * https://Bl.ocks.org/GoSubRoutine/5b18d019959031f517fc218667faa688
 */

"use strict";

let radio;

function setup() {
  createCanvas(150, 100);
  noLoop();

  radio = createRadio().position(20, 25).changed(redraw);

  radio.option('male', color('cyan'));
  radio.option('female', color('pink')).checked = true;
  radio.option('prefer not to say', color('orange'));

  encloseEachInputLabelPairIntoASubDiv(radio);
  fixRadioDivElement(radio);
}

function draw() {
  background(radio.value());
}

function encloseEachInputLabelPairIntoASubDiv(radioDivElement) {
  const inputs = selectAll('input', radioDivElement),
        labels = selectAll('label', radioDivElement),
        len = inputs.length;

  for (let i = 0; i < len; ++i)
    createDiv().parent(radioDivElement).child(inputs[i]).child(labels[i]);
}

function fixRadioDivElement(radioDivP5Element) {
  radioDivP5Element._getInputChildrenArray = function () {
    return this.elt.getElementsByTagName('input');
  }
}

```

---

<div class="post-metadata">

**Author:** ![togo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/togo/32/4464_2.png) [@togo](https://discourse.processing.org/u/togo)\
**Post date:** [April 8, 2019, 3:02am UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/8 "2019-04-08T03:02:06Z")

</div>

To kll:  
That’s really a good hack! I never thought of it this way! Thank you for this piece of wisdom.

To bhaaskar:  
I think this is also a good workaround! Thank you for offering your wisdom!

To GoToLoop:  
Thank you so so much for this deep knowledge.

> In short, all `<input type="radio">` + `<label for="radio's id">` pairs are wrapped up in 1 `<div>` .

Yes, you’re absolutely right. I observed this after looking at the generated HTML and I was wondering a way to overcome this situation. By drawing examples from the original source code of p5.js, you have brilliantly explained what is going behind p5.js. Also, thank you for providing the function. This has enabled me to deepen my understanding of p5.js.

---

<div class="post-metadata">

**Author:** ![hspencer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hspencer/32/14206_2.png) [@hspencer](https://discourse.processing.org/u/hspencer)\
**Post date:** [April 28, 2022, 10:27pm UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/9 "2022-04-28T22:27:25Z")

</div>

Another way is through the css file, ie:

```auto
label::after{
  content: '\a';
  white-space: pre;
}

```

(the `\a` character is the \<`br`\> char).

---

<div class="post-metadata">

**Author:** ![schuelaw](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schuelaw/32/16284_2.png) [@schuelaw](https://discourse.processing.org/u/schuelaw)\
**Post date:** [May 23, 2022, 5:41pm UTC](https://discourse.processing.org/t/how-to-organize-radio-buttons-in-separate-lines/10041/10 "2022-05-23T17:41:41Z")

</div>

Not sure if it introduces other issues, but @hspencer 's css tip works perfectly in my case. Thank you!