Aligning the text in the Radio button

  • lyricolorado
    Asked on September 18, 2016 at 8:44 AM
    i would like text for the second line for some radio buttons, to not be below the circle, inline with the starting text.  what's that called, like a reverse indentation
  • Jan
    Replied on September 18, 2016 at 9:36 AM

    I understand what you mean. Please give me more time to work on this issue. I will contact you once I have a solution. Thank you for understanding.

  • Jan
    Replied on September 18, 2016 at 11:54 AM

    Thank you for waiting. Please try this solution:

    1. Select the "Do you speak spanish?" field and then right click it. Choose the "Edit Properties" option.

    Aligning the text in the Radio button Image 1 Screenshot 60

    2. Go to the "Options" tab and insert <span> HTML elements on the specific location where you want to add the spaces. Or you can just copy the whole 1st option below:

    Yes, I speak Spanish and can <span style="margin-left:30px;"> conduct LYRIC presentations in </span> <span style="margin-left:30px;"> Spanish.</span>

    Aligning the text in the Radio button Image 2 Screenshot 71

    3. Click the "Save Changes" button when you're done.

    4. Select the "Volunteer Status" field and then right click it. Choose the "Edit Properties" option.

    Aligning the text in the Radio button Image 3 Screenshot 82

    5. Go to the "Options" tab and insert <span> HTML elements on the specific location where you want to add the spaces. Or you can just copy the whole 2nd option below:

    No, at this time, I do not want to receive <span style="margin-left:30px;">volunteer opportunity emails.</span>

    Aligning the text in the Radio button Image 4 Screenshot 93

    6. Click the "Save Changes" button when you're done.

    Here's the result:

    Aligning the text in the Radio button Image 5 Screenshot 104

    Hope that helps. Thank you.

  • lyricolorado
    Replied on September 18, 2016 at 12:46 PM
    can you look at my form again. i made the changes and it is properly
    reverse indented on the form in the builder mode, but not in the preview or
    ...
  • Kiran Support Team Lead
    Replied on September 18, 2016 at 2:31 PM

    I have checked your JotForm and see that the text for the radio buttons is properly aligned. 

    Aligning the text in the Radio button Image 1 Screenshot 20

    Please try opening the form in a separate browser if you are still experiencing any issue with the text alignment after making the changes. You may also try Ctrl+F5 to force refresh the cache on the browser. Let us know how it goes.

  • lyricolorado
    Replied on September 18, 2016 at 9:46 PM
    no, it is not right, even after making the changes you suggested and
    opening it in a new browser and trying the ctrl f5. it isn't line up like
    in the picture you have (which is how i ideally want it to be).
    ...
  • Ashwin JotForm Support
    Replied on September 18, 2016 at 10:59 PM

    Hello lyricolorado,

    I did check your form and I am unable to replicate the issue you are having. The radio button options are aligned correctly. Please check the screenshot below:

    Aligning the text in the Radio button Image 1 Screenshot 20

     

    Have you embedded your form in any webpage where you are unable to see the changes? Please share the webpage URL and we will take a look.

    We will wait for your response.

    Thank you!

  • lyricolorado
    Replied on September 19, 2016 at 3:46 PM
    here is the link to the form embedded into my website.
    http://www.lyricolorado.com/volunteer-information-sheet (you have to get to
    page 2, to see the problem)
    i know on the form builder it shows up properly aligned, but not on the
    actual form.
    thanks for working through this with me.
    ...
  • Jan
    Replied on September 19, 2016 at 5:30 PM

    May I ask what browser are you using? I was able to replicate the issue in Mozilla Firefox. Here's a screenshot: 

    Aligning the text in the Radio button Image 1 Screenshot 60

    The solution now is to use <div> tag without the inline CSS.

    1. Select the "Do you speak spanish?" field and then right click it. Choose the "Edit Properties" option.
    2. Go to the "Options" tab and insert this as the first option:

    Yes, I speak Spanish and can <div>conduct LYRIC presentations in </div><div>Spanish.</div>

    Aligning the text in the Radio button Image 2 Screenshot 71

    3. Select the "Volunteer Status?" field and then right click it. Choose the "Edit Properties" option.
    4. Go to the "Options" tab and insert this as the first option:

    No, at this time, I do not want to receive <div>volunteer opportunity emails.</div>

    Aligning the text in the Radio button Image 3 Screenshot 82

    This should now work in Google Chrome and Mozilla Firefox. Here are the screenshots:

    Aligning the text in the Radio button Image 4 Screenshot 93

    Aligning the text in the Radio button Image 5 Screenshot 104

    Hope that works for you. Let us know if you're still having issues. Thank you.

  • lyricolorado
    Replied on September 20, 2016 at 8:46 PM
    fixed! thanks so much. and yes, i use firefox.
    ...