CSS Customization: Aligning Single Choice Radio Button 'Other' Field Inline

I am trying to get a single choice list with other option to display on one line. It is close, but I cannot get the other option to display the other input properly.

I have in css - mostly recommended by podo:

.form-radio-item.formRadioOther {

  width : 120px !important;

  max-width : 120px;

  flex : 0 0 120px;

  overflow : hidden;

}

[data-css-selector="id_21"] input.form-radio-other-input {

  display : inline-flex;

  align-items : flex-start;

  white-space : nowrap;

  width : 110px !important;

  min-width : 110px;

  max-width : 110px;

}

It looks like this with no selection in preview:

Looks like this if I float over the field in design view (field is long, extended off page)

and like this if I select Other in preview, because the field is too long. The input field is off screen and not inline, it is slightly below.

In build it looks like the input field would be close, but still not inline, but if you open the form in a new tab, it is off the form. In build:

In a new tab form for submitting:

I did try to align-items: left for the input, but that did not help. I think if I can really get the .form-radio-item.formRadioOther width to be shortened this would work.

Any ideas?

Thanks,

Dorothy

Hi Dorothy,

Thanks for the detailed explanation and screenshots. The issue happens because the Other option container was forcing a fixed width, which pushed the input field outside the form area. At the same time, the input for field 88 was breaking onto a new line when selected.

To fix this, use the updated custom CSS code below and make sure to delete all existing CSS for field ID 21. This keeps the inputs inline, shortens them to a fixed width, and ensures they stay contained within the form without affecting other fields:

/* Field 21 */

#id_21 .form-radio-item.formRadioOther {

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  flex-wrap: nowrap;

  width: auto !important;

  max-width: 100% !important;

}



#id_21 .form-radio-other-input {

  display: inline-block;

  width: 120px !important;

  max-width: 120px !important;

  margin-left: 6px;

  vertical-align: middle;

}



/* Field 88 */

#id_88 .form-radio-item.formRadioOther {

  display: inline-flex;

  align-items: center;

  flex-wrap: nowrap;

}



#id_88 .form-radio-other-input {

  display: inline-block;

  width: 120px !important;

  max-width: 120px !important;

  margin-left: 6px;

  vertical-align: middle;

}

Check out my screenshot below to see the result:

Try that and reach out again if you need more help.

Can you do this with Other being on the same line as the first three options? That is what I was trying to do.

Hi Dorothy,

To achieve this, disregard the custom CSS code that I shared above and add this code below into your form:

span:has(#other_21) {

  overflow: visible;

}

#label_other_21 {

  max-width: 100px;

}

#other_21_input {

  max-width: 333px;

  margin-top: -13px;

}

Check out my screenshot below to see the result:

Give it a try and reach out again if you have any other questions.

looks perfect, just what I would like in the screen shot. The code is giving an error when I add it,

For now, I changed the line with the error to: 

#other_21_input {

  overflow : visible;

}

Should I modify it differently?

Thanks,

Dorothy

Hi Dorothy,

I suggest adding it through the Form Builder, rather than the advance designer. It's easy to Inject CSS Codes into your form. Let me show you how:

1. First, copy this code:

/*Removes Borders & Shadows Around the Form*/

span:has(#other_21) {

  overflow: visible;

}

#label_other_21 {

  max-width: 100px;

}

#other_21_input {

  max-width: 333px;

  margin-top: -13px;

}

2. In Form Builder, click on the Paint Roller icon.

3. Then, in the Form Designer menu on the right, go to the Styles tab.

4. Finally, paste the CSS code into the Inject Custom CSS code field.

Let us know if you have any other questions.

Hi Dorothy,

I’ve gone ahead and moved your other question to a separate thread to keep things tidy, and someone from our Support Team will help you out with it here.

Reach out again if you need any help.