How to remove padding from right hand side of form

  • jmuskus
    Asked on September 13, 2014 at 6:19 PM

    I have managed to remove the padding from the left hand side of my form but can't seem to be able to do it on the right. I would like the edge of the form to be much closer to the edges of the fields. Thanks!

  • jvd042012
    Replied on September 14, 2014 at 3:59 AM

    Hi jmuskus,

    The form is not working. Is it this one?

    How to remove padding from right hand side of form Image 1 Screenshot 20

  • jedcadorna
    Replied on September 14, 2014 at 4:05 AM

    I just want to confirm that you want to remove the padding on the right side, right? Also, Do you still want to move the input box on the left side?

    I have adjusted the form like this:

    How to remove padding from right hand side of form Image 1 Screenshot 20

  • jmuskus
    Replied on September 14, 2014 at 4:28 AM

    Apologies, I seem to be having real problems with lefts and rights at the moment!! Can you tell me how to do that?

  • jvd042012
    Replied on September 14, 2014 at 5:16 AM

    Hi jmuskus,

    Check the other thread as well. It might help with your CSS codes.

    http://www.jotform.com/answers/428370-Header-widget-is-shifted-to-the-right-exiting-the-form?&&updatemessage=10732640770

    Thanks!

  • jmuskus
    Replied on September 14, 2014 at 7:37 AM

    I still don't seem to be able to adjust the padding on the right hand side?! Have now made it 10px on the left side and have been trying to get it looking symmetrical on the other side. I feel like this should be easy to fix?!

  • ShadaeTrotman
    Replied on September 14, 2014 at 2:31 PM

    Hi Jmuskus. Sorry that you have not been able to get assistance with this sooner. I am not able to bring up your form, not sure if it was deleted.

    Please try to inject this CSS in your form to remove the padding or adjust it as needed. You can see how to inject code at this link

     

    .form-line {

    padding-left: 0px;

    padding-right: 0px;

    }

     

    You can change the number in front of the px to get your desired padding.

     

    I hope this helps

  • jmuskus
    Replied on September 14, 2014 at 2:54 PM

    I've tried that but it just doesn't seem to affect anything on the right hand side....

    My form is here: http://www.jotform.com//?formID=42535606641352

  • jvd042012
    Replied on September 14, 2014 at 5:15 PM

    Hi jmuskus,

    I checked your form and it seems fine. Can you describe more about the issue?

    How to remove padding from right hand side of form Image 1 Screenshot 20

    Thank you!

  • jmuskus
    Replied on September 14, 2014 at 5:39 PM

    I am trying to get rid of more of the empty space on the right hand side of the form as I have done on the left where you can see the edge of the form is much closer to the form content...

  • ShadaeT
    Replied on September 14, 2014 at 5:52 PM

    Thank you for providing the link to your form again.

    It does appear that the padding has been removed. If you would like to get rid of the the space on the right side, you may need to adjust the width of the form and the label itself from within the builder.

    How to remove padding from right hand side of form Image 1 Screenshot 20

    I hope this helps.

  • jmuskus
    Replied on September 14, 2014 at 6:17 PM

    That does not affect the space I am trying to get rid of. It looks like jedcardona (further up the thread) managed to get the effect I want so just need to know how that was managed!

  • ShadaeTrotman
    Replied on September 14, 2014 at 6:52 PM

    Hi Jmukus,

    I do apologize if the previous information was not helpful.

    I would like to confirm, would you like the form to look like this? Or does it still have too much space for you?

    How to remove padding from right hand side of form Image 1 Screenshot 20

     

     

  • jmuskus
    Replied on September 14, 2014 at 6:56 PM

    Hi, yes that is what I want, how did you do that??

  • ShadaeTrotman
    Replied on September 14, 2014 at 7:04 PM

    Great, I am happy that it is suitable for you!

    You can clone my form 

    The form width was changed to 310

    The labels were aligned left to ensure that the boxes do not go below the field labels.

     

    This code was also injected into the form:

    .form-line {

    padding-left: 0px;

    padding-right: 0px;

    }

    I really hope this helps!

  • Ashwin JotForm Support
    Replied on September 14, 2014 at 11:32 PM

    Hello jmuskus,

    I am glad to know that your issue was resolved.

    Do get back to us if you have any questions.

    Thank you!

  • jmuskus
    Replied on September 15, 2014 at 3:38 AM

    Finally it's working!! Still don't know what I was doing wrong before!! Maybe its the order I was doing it in?! Thanks so much!!

  • Ashwin JotForm Support
    Replied on September 15, 2014 at 4:53 AM

    Hello jmuskus,

    On behalf of my colleagues, you are welcome.

    Its good that you were able to resolve the issue.

    Do get back to us if you have any questions.

    Thank you!