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

    Aligning labels for check boxes and radio boxes - text wrapping works but single lines now don't

    Asked by AustralianMusicFoundation on April 08, 2014 at 10:32 AM

    I copied the solution provided to wrap text in this Forum thread

    http://www.jotform.com/answers/274565-Breaking-long-radio-button-option-choices-into-2-lines-aligning-them-

    This solved the problem for the two line radio button labels and wrapped them correctly. 

    However, any single line radio button labels are now out of line and the check box labels are all also out of line.

    The code i used is:

     

    input[type="radio"] + label {margin-left: 19px;float: left;margin-top: -16px;}

     

    My form is: http://form.jotformeu.com/form/40852399241357?

    Thanks

    Bronwen

    Page URL:
    http://form.jotformeu.com/form/40852399241357?

    Screenshot
    check wrapping and JotForm problem label float
  • Profile Image
    JotForm Support

    Answered by KadeJM on April 08, 2014 at 12:58 PM

    I am under the impression that you are trying to align these more but please correct me if that is incorrect. I started working on this but it's been a giving me some trouble forcing me to try to tweak other parts of the code. 

    I was able to partly fix it in Chrome at least but as for FF and IE it is still a much larger mess which would require more time and probably reworking an entirely code just to fix it across all browsers.

    In Chrome all I did was adjust the " Margin-left value to 80px " moving your radio button to the left some. I couldn't move it to the right or any other direction since that would offset it and mess everything else up even worse.

    I don't really see this as something that is feasible since it's best to make it look nice across most major browsers so we will work on this some more and get back to you with something better as soon as we can.

    Adjusted Code:

    input[type="radio"] + label {margin-left: 80px;float: left;margin-top: -16px;}.form-line {padding: 3px 0px !important;}.form-line-column{width: auto !important;padding-right: 10px !important;}.form-line-active {

    background-color:#F8F8F8;

    }

  • Profile Image
    JotForm Support

    Answered by KadeJM on April 08, 2014 at 01:01 PM

    Also, Just in case you wanted to see it in action. Here's the Test Clone Form http://form.jotform.us/form/40974277560159 I made with the adjusted code applied so you can see it live. You'll notice it looks perfect in the latest version of Chrome but if you open it in other browsers such as FireFox and IE then it remains the same problem still.

  • Profile Image

    Answered by EliezerN on April 08, 2014 at 05:27 PM

    Hello Bronwen,

    My colleague Kade and I worked in your form in order to fix it. As he already stated, we were having troubles to get your radio buttons work properly with the existing CSS code, it will simply not work in all the browsers.

    However, after dedicating more time to work on this problem, we were able to fix at last. That implied to change your current code and to add new one. However, if I we have not missed something, I can say it works perfectly in all browser (Chrome, FireFox, IE, Safari and Opera).

    We cloned your form to perform the changes, here it is our form: http://form.jotformpro.com/form/40975335035960

    You can clone it by following this guide: How to clone an existing form from a URL

    We replaced this code: 

    input[type="radio"] + label {

    margin-left: 19px;

    float: left;margin-top: -16px;

    }

    We replaced it by this one:

    input[type="radio"] + label

    {

    white-space:nowrap;

    }

    Then we also added this new code:

    .form-radio

    {

    width:15px !important;

    padding:0px !important;

    margin-right: 0px !important;

    }

    #cid_31 .form-radio-item

    {

    width:800px !important;

    }

    So here is the complete code we used: 

    .form-header-group{

    background-color:#FFC20F;

    }

    .form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 140px;

    }

    /*NEW CODE*/

    .form-radio

    {

    width:15px !important;

    padding:0px !important;

    margin-right: 0px !important;

    }

    #cid_31 .form-radio-item

    {

    width:800px !important;

    }

    input[type="radio"] + label

    {

    white-space:nowrap;

    }

    /*END OF NEW CODE*/

    .form-line {

    padding-left: 5px;

    padding-bottom;

    2px !important;

    }

    .form-line-column

    {

    width: auto !important;

    padding-right: 4px !important;

    }

    .form-line-active {

    background-color:#F8F8F8;

    }

     .form-line {

    margin: 0 0 !important;

    }.form-label-top

    {

    margin-bottom: 1px !important;

    }

    #label_254

    {

    visibility:hidden;

    }

    #Label_musical direction {

    visibility:hidden;

    }

    #musical direction

    {

    margin-left: 0;

    margin-top: 2px;

    margin-bottom: 2px;

    color: #167000;

    }

    #Label_other funding

    {

    visibility:hidden;

    }

    #other funding

    { margin-left: 0;

    margin-top: 2px;

    margin-bottom: 2px;

    color: #167000;

    }

    You can see the new code and fixed code highlighted with green color.

    So, we hope that solve the issue for you, but if you need further assistance with this inquiry, do not hesitate to contact us.

    Thanks

  • Profile Image

    Answered by AustralianMusicFoundation on April 09, 2014 at 03:21 AM

    Hi Kade and EllzerN

     

    Thanks for taking the time to work on this - it is almost there - the only problem is that the text on the long radio button labels doesn't wrap to the next line, but goes over the edge of the form.

    Is there any way to add a wrap text code?

    I really appreciate all your help.

     

    Thanks

    Bronwen

  • Profile Image
    JotForm Support

    Answered by jonathan on April 09, 2014 at 05:23 AM

    Hi,

    Please update this CSS code embedded on your form.

    From this

    #cid_31 .form-radio-item

    {

    width:800px !important;

    }

    input[type="radio"] + label

    {

    white-space:nowrap;

    }

    /*END OF NEW CODE*/

     

    to this

    #cid_31 .form-radio-item

    {

    width:670px !important;

    }

    input[type="radio"] + label

    {

    white-space:normal;

    }

    /*END OF NEW CODE*/

    You can adjust the width number in px according to your preferrence also.

    I tested it and the result is like this

     

    Hope this help. Inform us if you need further assitance.

    Thanks.