Radio Button field - Align text box for "other" choices option [RESOLVED]

Get Help
,
1

When creating Radio Option field and selecting the box for the - Enable “Other” choice option. The text field for “Other” is below. Is there a way to force/align so the text box appears right next to the the “Option” radio button?

2

Hi Todd,

Please follow the steps below to align the Radio field’s other choice with the input field.

  1. First, add a custom CSS class to the Radio Field Settings → Appearance → Custom CSS Class.

Class Settings
Class Settings1920×968 79.5 KB

  1. Now add the following CSS in the child theme’s style.css file or in Appearance → Customize → Additional CSS.
.inline_other_input .gfield_radio .gchoice:last-child {
  display: flex !important;
}

.inline_other_input .gfield_radio .gchoice:last-child label {
  margin-right: 10px !important;
}

.inline_other_input .gfield_radio .gchoice:last-child input:last-child {
  margin-top: -10px;
}

Now, you’ll find the Other option input field is aligned with the radio field.

image
image3840×1936 264 KB

Give it a try, and let me know how that goes! :smile:

3

Thanks Faisal.

That got me like 95% closer.

The first CSS style you gave worked to get things on same line.

Other two CSS codes did not affect anything.

So with the above, the radio button and the text box are on same line but jammed up together. Plus, the text box is not centered on the radio button. Haven’t worked much with CSS but playing around and looking for other options.

The other thing I have been trying to figure out is why on Safari, the dropdowns display as a vertical gradient of grey to white, (The list has grey background d which is fine) But not on Chrome. I had set the background to White for the fields. Another site that is also using gravity forms seems to show the box white on Safari.

5

I seemed to resolve it by trying to figure out CSS options & making some CSS adjustments:

The first CSS style you gave worked to get things on same line. since the other two CSS codes did not affect anything. I then looked further into Display:Flex and alignment options and came up with the following code to line everything up nice on that one line:

.

inline_other_input .gfield_radio .gchoice:last-child {
  display: flex !important; 
  align-items: center !important;  
}

OR. on my particular form I see I could also use :

.gchoice.gchoice_4_35_5{
  display: flex !important; 
  align-items: center !important;  
}

As far as the other Safari issue. This form was originally copied from an older form using the 2.5 template. I also saw in Gravity Forms settings the option to change the system form to “Orbital”. This resolved the strange Safari issue I had with the initial looks of the dropdowns (bottom of 3rd post). Also resolved the “Other” text box containing the text “Other”. At least when form is first presented.

Since these Radio Buttons are a required field, if you select “Other” and do not fill out anything in the box, you will get the submission error and then the system puts “Other” in the text box. If you click in the box you have to get rid of the text. Doesn’t disappear when clicked. (POSTED A NEW THREAD ON THIS ISSUE)

However, I now have a new Safari issue. The “(Required)” text is not properly formatting. On some fields it jammed up against the Label. In other spots it appears OK. In Chrome it is all OK. Seems to affect Check boxes, Radio Button & Name Field. (POSTED A NEW THREAD ON THIS ISSUE)