# Radio button labels not aligning to button

**URL:** <https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537>\
**Category:** New Responsive Engine\
**Created:** [February 6, 2023, 5:33pm UTC](https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537 "2023-02-06T17:33:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![grid\_lock](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@grid\_lock](https://forum.bubble.io/u/grid_lock)\
**Post date:** [February 6, 2023, 5:33pm UTC](https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537/1 "2023-02-06T17:33:33Z")

</div>

I have created a simple survey app, and am using radio buttons for a few of the questions. When editing the app, the labels align nicely with the radio button and the bullet for the selected option is centered in the circle. When I preview/deploy the app, however, the labels are displaying below the radio button and the selected bullet is off-center.

Editor:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/4/34ec3b5447fee08f7fb73bb3d8276dbccb1efc72.png)

Preview:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/b/7b859b815ced40676d8bf2ef92366d477f8e0308.png)

I have looked at all setting I could find in the radio button element and the radio button style, but none of them seem to fix the issue.

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/f/d/fd9a5dc0586f23cfdc139dc49f863bd4ac9cf80f.png)

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/7/27d41bc165bc00869137cd020fff2532118c332d.png)

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/b/3/b3da792d4f2be78a12da5aef839181ad40b4857d.png)

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/4/24b604a0f35c026f410d30b01cf796f4699cbb10.png)

Any ideas on what is causing this?

---

<div class="post-metadata">

**Author:** ![jonathon.david.mador](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jonathon.david.mador](https://forum.bubble.io/u/jonathon.david.mador)\
**Post date:** [April 23, 2023, 5:44pm UTC](https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537/2 "2023-04-23T17:44:49Z")

</div>

I don’t know for sure, but I think that if you change the default font size for the radio button options, the alignment between button circles and text might get messed up.

I am trying to fix this in my own app right now - I will post here later if I find out the answer!

---

<div class="post-metadata">

**Author:** ![jonathon.david.mador](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jonathon.david.mador](https://forum.bubble.io/u/jonathon.david.mador)\
**Post date:** [April 23, 2023, 7:05pm UTC](https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537/3 "2023-04-23T19:05:29Z")

</div>

I think the answer is to insert an HTML element in Bubble, and use custom HTML/CSS code. This allows you to change the width and height of the radio buttons, along with other aspects of the radio buttons (such as spacing between options).

You can see a thread with more info here:

> [@Radio Button line spacing](http://forum.bubble.io/t/radio-button-line-spacing/257963):
>
> How do you create more line space between radio button options? The default is awfully close together, which is not ideal for touchscreen users. In the radio button styling, you can edit word and letter spacing but not line spacing between options?

---

<div class="post-metadata">

**Author:** ![garment.wader0z](https://avatars.discourse-cdn.com/v4/letter/g/ec9cab/32.png) [@garment.wader0z](https://forum.bubble.io/u/garment.wader0z)\
**Post date:** [June 9, 2023, 2:51pm UTC](https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537/4 "2023-06-09T14:51:28Z")

</div>

I had the same problem.

However, I identified the source of the problem to be the IconButton plugin. Uninstalling the plugin reverted the radio buttons back to their default display.

 ![Screenshot 2023-06-09 at 15.49.53](https://us1.discourse-cdn.com/bubble/original/3X/5/0/509bd45b7e97376f57856d38552a5032e9c29bfc.png)

---

<div class="post-metadata">

**Author:** ![grid\_lock](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@grid\_lock](https://forum.bubble.io/u/grid_lock)\
**Post date:** [July 10, 2023, 6:48am UTC](https://forum.bubble.io/t/radio-button-labels-not-aligning-to-button/245537/5 "2023-07-10T06:48:18Z")

</div>

Nice catch! Thank you!
