Radio button labels not aligning to button

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:

Preview:

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.

Any ideas on what is causing this?

1 Like

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!

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:

1 Like

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.

Nice catch! Thank you!