# Adjust the text height of a radio button

**URL:** <https://discourse.processing.org/t/adjust-the-text-height-of-a-radio-button/38682>\
**Category:** Beginners\
**Created:** [September 8, 2022, 1:30pm UTC](https://discourse.processing.org/t/adjust-the-text-height-of-a-radio-button/38682 "2022-09-08T13:30:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sunt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sunt/32/16827_2.png) [@Sunt](https://discourse.processing.org/u/Sunt)\
**Post date:** [September 8, 2022, 1:30pm UTC](https://discourse.processing.org/t/adjust-the-text-height-of-a-radio-button/38682/1 "2022-09-08T13:30:25Z")

</div>

Hi.  
I’m trying to align the text of a radio button. Without setting a specific font size, it is acceptable; but with smaller fonts, the text position will be lower. Is there a solution for that?

```auto
function setup() {
  createCanvas(400, 400);
  radio = createRadio();
  radio.option(" one");
  radio.option(" two");
  radio.option(" three");
  radio.style("vertical-align", "top"); // ??
  radio.style("font-size", "13px");
  radio.position(20, 20);
  radio.input(() => {
    myFunction();
  });
}

function draw() {
  background(220);
}

```

![Captura de tela 2022-09-08 103458](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/3/539717203d6d42c257baef29f5d86d052136cec5.gif)

---

<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:** [September 8, 2022, 2:29pm UTC](https://discourse.processing.org/t/adjust-the-text-height-of-a-radio-button/38682/2 "2022-09-08T14:29:59Z")

</div>

> [@Sunt](#):
>
> Is there a solution for that?

- Each radio label text is inside a `<span>` element.
- So I’ve collected them all via [**selectAll()**](https://p5js.org/reference/#/p5/selectAll) over the created radio.
- Then applied some [**style()**](https://p5js.org/reference/#/p5.Element/style) until they got aligned to their respective radio button:

```javascript
"use strict";

function setup() {
  makeAlignedRadio();
}

function makeAlignedRadio() {
  const radio = createRadio().position(20, 20).style('font-size', '13px');
  radio.option(' one');
  radio.option(' two');
  radio.option(' three');

  const spans = selectAll('span', radio);
  for (const span of spans)
    span.style('position', 'relative').style('top', '-2.5px');

  return radio;
}

```

---

<div class="post-metadata">

**Author:** ![Sunt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sunt/32/16827_2.png) [@Sunt](https://discourse.processing.org/u/Sunt)\
**Post date:** [September 8, 2022, 2:36pm UTC](https://discourse.processing.org/t/adjust-the-text-height-of-a-radio-button/38682/3 "2022-09-08T14:36:43Z")

</div>

Thank you once more! As always, a good solution with a good explanation. 🙏