Question

My radio button is above the choice text and I can't see why

Forms Version 10

Updated May 29, 2019

asked on May 29, 2019

I have a form where a simple radio button choice (2 choices) is fine on the first form submission, but on the approval form where the radio button choice is read only, the button is placed above the choice text. I cannot see why.

Without any CSS on that field on both forms they look different. I have tried all suggestions for radio button formatting found on this site and none of it changes the position of the radio button. What could be causing it?

Clip showing first form, for the applicant (no CSS Class or CSS formatting on that field):

Clip showing Approval form (no CSS Class or CSS formatting on this field):

It's like this whether read-only or not. The only thing new I have introduced is the extra code to push spaces in to separate the two choices a bit more, however, this extra code is on both forms so it isn't that.

0 0

Answer

SELECTED ANSWER

replied on May 29, 2019

input[id*='Field] is definitely the culprit because it makes the radio button container so wide that there's not enough room for the label.

.cf-field {width: 150px;} actually won't apply at all because that selector alone is not enough to override the default styling applied by Forms

The other line is id-specific so it shouldn't play a role.

1 0

Replies

replied on May 29, 2019 • Show version history

Something is definitely affecting the sizing. On the second one, is there no CSS at all, or just no CSS that "should" be affecting the radio buttons?

I'd use the browser dev tools to inspect the radio input and label to see what styling is being applied because it seems like something is affecting it unexpectedly.

It looks like the radio input is centered in the second example, which is what's fueling my suspicions.

Also, look at whether you have both examples set to side-by-side, 1 column, 2 column, etc., because that could make a big difference.

1 0

View 1 previous reply

replied on May 29, 2019

Thank you for that tip, Jason! Your comment made me realize I could just delete ALL CSS on that form (saved to a Word doc) and then if that made a different, add pieces in one at a time until I found the piece. Worked! I found the piece:

/*To get approval fields lined up closer together in one line*/

.cf-field {width: 150px;}

input[id*='Field'] {width:80%;}

#q164, #q172, #q169, #q162, #q167 {display: inline-block; vertical-align:top;}

This above coding was used to force five fields to line up properly. Those five pieces (a combination of radio button, date fields and single line fields were giving me trouble.

So, what in the above coding is causing a different field (q174) to be changed?

0 0

SELECTED ANSWER

replied on May 29, 2019

input[id*='Field] is definitely the culprit because it makes the radio button container so wide that there's not enough room for the label.

.cf-field {width: 150px;} actually won't apply at all because that selector alone is not enough to override the default styling applied by Forms

The other line is id-specific so it shouldn't play a role.

1 0

replied on May 29, 2019

Actually, I've just discovered that the issue is gone. Is it possible that removing all CSS and adding pieces back in one at a time has cleared out a glitch? Both areas that I was having trouble with are now working fine, with or without the extra coding. Even the approval fields are fine now without:

.cf-field {width: 150px;}
input[id*='Field'] {width:80%;}

0 0

replied on May 29, 2019

Be sure to test at multiple window sizes. The padding and margins tend to be different depending on how big the window/screen size is. This will cause different results.

1 0

You are not allowed to follow up in this post.

Question

Question

My radio button is above the choice text and I can't see why

Answer

Replies

Sign in to reply to this post.