What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Align radio buttons in 2 columns with allow other text box

    Asked by Haler on December 22, 2014 at 07:16 PM

     A. Here is where I started (see attached file: Started with Radios.JPG)

    B. Here is the process I used:

    1. With your form in Edit mode (> = Click)

    2. >The field area to make the change to.

    3. >Setup & Embed (in the secondary menu row

    4. >Preferences in the Primary menu row

    5. >Form Style (in the Preferences menu

    6. In the right side, Paste the following CSS code:

    .form-multiple-column span:last-child {
          clear: none !important;

    }

    7.                                       > [ Close Settings ]

    BUT I need
         The 6th Alternative Radio "Other" aligned horizontally with its Button, as are the others.
         The Horizontal Spacing between the two rows to be approximately 1/4".
         The top row of Radio buttons to be aligned on the same row and top line of the Label text.

    Thanks so much for your help and patience.

    Dwight

    Page URL:
    http://www.jotform.com//?formID=43398844145161

    Screenshot
    radio buttons alignment and style label jpg
  • Profile Image
    JotForm Support

    Answered by Kiran on December 22, 2014 at 11:03 PM

    Is this how you are looking to align the field?

    You can achieve this from the Form Designer by changing the input width around 240px for this radio button field along with your added CSS code.

    Hope this information helps. Please let us know if you need any further assistance.

    Thanks!

  • Profile Image

    Answered by Haler on December 23, 2014 at 04:54 AM

    Hi Kiran,

    Thanks, I tried to send details several hours ago but when I checked back just now I found what appears that you got nothing.

    In summary: YES, what you sent was what I need but I couldn't get it to work.  I played around with the number around 240, but nothing I tried got the "Other"Radio button to move from the left column to the right.

    There was a note you sent, in red, but I could not find any other properties that seemed to make a 
    difference.

    Is there anything more that you can tell me?

    Thanks for what looked like a sure simple way to solve the problem.  I hope someone knows.

    With much appreciation

  • Profile Image

    Answered by val on December 23, 2014 at 09:00 AM

    Hi,

    Please find this CSS code in your CSS files "max-width:220px;" and replace to "max-width:240px;".

    And here is the guide on how to inject custom CSS code to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please get back to us if the issue still persist.

    Thanks.