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

    Can't Align Radio Button to "Text" options

    Asked by edusa2000 on January 19, 2015 at 08:06 AM

    I cannot align these freakng option buttons with teh text. I have added all teh css on this post adn I cannot get it to work

    http://prntscr.com/5ubft4

    Please let me know

    radio buttons alignment CSS layout
  • Profile Image
    JotForm Support

    Answered by Charlie on January 19, 2015 at 09:58 AM

    Hi,

    I see that you have attached an image, please do attach the Form URL or the title of the form so that we can check it in our end. I can't seem to find the form that you are having problems with.

    For the meantime, I'm guessing that the text in your options is too long that it doesn't match the minimum width of the form.

    1. Navigate to "Designer"

    2. Inside the "Designer" options, click the "Form Layout" section and change the form's width there.

     

    I would also recommend that you check any custom CSS code that you added, it might be conflicting with the current design of the form.

    Let us know if this works.

    Thank you.

  • Profile Image

    Answered by edusa2000 on January 20, 2015 at 01:21 AM

    I have increased the size of the form to no success. I have even download and install the wordpress plugin, but it does work, but now it display all the forms and the button become useless.

     

    please advice, this is my url

    http://prntscr.com/5upgjr

     

  • Profile Image

    Answered by Ben on January 20, 2015 at 05:53 AM

    I have managed to find the jotform (http://www.jotform.us/form/50157929370156) that is most likely the one you are taking the screenshots from, but as mentioned by my colleague we need to know what is the jotform in order to be able to provide assistance.

    When I take a look at it however it is shown properly for me, so I presume that the issue is resolved:

    If you are viewing the jotform on your website, we would need to know the exact URL to the page where the jotform is where this issue is present in order to assist.

    Awaiting for your confirmation. Ben

  • Profile Image

    Answered by edusa2000 on January 20, 2015 at 05:22 PM

    Yes, kind of works, Here's my issue. This happens only when I am viewing it from my wordpress site. Now the problem in terms of showing the bullets correctly, they work, but the second time i revisit the page, it display all the forms in a single age and at that point the bullets or option buttons no longer work.  See screenshot  http://prntscr.com/5uzsfj

    You will need to try 3 times.

    for instance, open it up, and click on one of the option buttons. now open a second tab and ytoum ight see all the forms displayed, if not, try a 3rd tab and this time hopefulyl you see the that.

     

    I am thinking this has to do with caching.

  • Profile Image

    Answered by Ben on January 20, 2015 at 06:22 PM

    Oh, OK. I now understand what you mean. For some reason, when I took a look at the screenshot with the URL I was expecting the URL of the website to be there and dismissed the screenshot.

    Now once I went to it, I saw the website and remember that we had talked over chat :)

    They are not aligned properly because the other jotforms are loaded through the iframe embed option so they have extra padding and extra margins set.

    This code will align them properly:

    #id_1 {
        margin-left: 25px;
    }

    If you want to add an extra touch, this code will get the iframe code closer to the radio buttons at the top (so that there is not that extra spacing):

    #id_3, #id_4, #id_5, #id_6 {
        margin-top: -35px;
        padding-top: 0;
    }

    The complete code would look like this:

    #id_1 {
        margin-left: 25px;
    }
    #id_3, #id_4, #id_5, #id_6 {
        margin-top: -35px;
        padding-top: 0;
    }

    You can inject it to your jotform following these steps: Inject Custom CSS Codes

    Do let us know how it looks once added. :)