Custom CSS: Help with form alignment

  • Profile Image
    guest_23028792568059
    Asked on December 26, 2012 at 07:41 AM

    Hi

     

    This is the form:

    http://form.jotformeu.com/form/22765115796361

    Is there a way to have the I consent label and radio button on one single line> Currently it is wrapoping the text to the left, I don't want to adjust the width of the other labesl, just this one.

     

    Thanks In Advance

    Merry Christmas

    D

  • Profile Image
    Welvin
    Answered on December 26, 2012 at 08:33 AM

    Hi,

    First, set the label of the field to TOP and inject this custom CSS codes to your form;

    #cid_12 {

    margin-left: 252px !important;

    margin-top: -26px !important;

    }

    This is the output from the clone version of your form: http://www.jotformpro.com/form/23603911686961?

     

    Thanks

  • Profile Image
    guest_23028792568059
    Answered on December 26, 2012 at 08:57 AM

    Thanks:) That is a lot better, however would you be able to move the I agree text so that is aligns on the left with the rest of the text?

    Thanks In Advance

     

    D

  • Profile Image
    Welvin
    Answered on December 26, 2012 at 09:10 AM

    Hi,

    Re-check this form: http://form.jotformpro.com/form/23603911686961?. Is this what you mean?

    What I did is to add the "I Agree" text on the label and inject this codes to hide the "I Agree" text next to the checkbox:

     

    #input_12_0 + label {

    display: none !important;

    }

    Let me know if you have questions.

     

    Thanks

  • Profile Image
    guest_23028792568059
    Answered on December 26, 2012 at 09:22 AM

    Hi

    It all looks great but what I was referring to(my fault, I said the wrong thing), can you move the

    I give my ................... text over a couple of pixels so that the I lines up with all the other labels?

     

    Thanks again for your help

  • Profile Image
    EduardoMendez
    Answered on December 26, 2012 at 09:39 AM

    Hi there, 

    Please try injecting the following CSS code and let us know if that has solved the problem:

    #label_12{padding-left:3px;}

    Here is what it would look like:

    http://form.jotformpro.com/form/23604169431955?

  • Profile Image
    Dannilee
    Answered on December 28, 2012 at 02:11 PM

    Hi

    Thanks

    Can you tell me how to move the radio box closer to the text? Something like 3 spaces after the * would be great.

     

    Then it's all good :)

  • Profile Image
    Mike_T
    Answered on December 28, 2012 at 03:32 PM

    You may adjust a bit your custom CSS code. For example, try to change the highlighted value from 281px to 260px.

    #cid_12 {
    margin-left: 281px !important;
    margin-top: -26px !important;
    }

    Change to:

    #cid_12 {
    margin-left: 260px !important;
    margin-top: -26px !important;

    Thank you for using our service :)