When I use radio button selections when horizontal, if you click just to the right of the circle it selects the option to the left. In the image below I clicked right around the red X but the selection was to the left of it. This happens to all my Radio buttons and users have noticed.
This can happen when the overall width you give to your radio buttons elements isn’t wide enough.
I’m not sure of the mechanics of how Bubble handles the space allocation, but I believe you width allocation for each column should accommodate the longest text string (ie. if “Most of the time” is 120px, and you want 4 columns, then the element itself should be 480px).
the only issue with that is, those are just text labels… the actual answers are hidden and are just 1,2,3 & 4 which are all the same length and should fit with how wide it is.
Widening the element did not fix it. Doesn’t seem to matter how wide or narrow the element is, if you click just to the right of any bubble after the first selection choice, it selects the one to the left instead of the one your hovering.
By text labels, do you mean that they are text elements independent of the radio buttons? (And that you have text values for the radio buttons that are “hidden” - ie. color is transparent/blended to background)…
Provided you’re comfortable doing so, PM me a link to your editor and I’ll take a look.
its not just this project. I can recreate the issue any time I use radio buttons. here is a different project where I just put up radio buttons… clicking to the right of a circle will select the option to the left instead of the one your hovering.
doesn’t happen when they are vertical, just when you give 4 columns. Pretty sure it is a bug…
Heads up: your app is still set to private. Can’t access it unless set to everyone can view/edit.
Sorry about that, it is open now.
I see what you’re saying now. I attempted around ~50-60 clicks, and was able to get it to happen two times (that I noticed).
One thing that can help is to give your radio buttons larger targets for the user to click. Right now, the targets are just the radio button followed by a single character. But, when full text is added, the whole string of text is clickable.
I realize you may be placing labels on top of the radio elements to get the labeling you’re looking for in order to save as a number. However, if you’re looking to format a specific way in the database (ie. you want the value to save as 1,2,3,4), you can use a bit of conditional logic to transform the values.
There are a handful of ways of setting that up. I made a demo of the concept lower down on your page. (Uses a custom state, which has a number value, which is updated when you select the different radio button options.
Thanks I appreciate that. I posted it in a bug because there is a specific spot, I can click that will always generate the issue. I am hoping they fix it. I think it is just an error with how the element is formatted when you do them as rows instead of vertical.
Your solution is a good work around until they fix this though.
1 Like
This topic was automatically closed after 14 days. New replies are no longer allowed.