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

    Header widget is shifted to the right exiting the form

    Asked by jmuskus on September 13, 2014 at 12:06 PM

    Comment 3:

    Me again! I changed the background of my header but the color does not reach right across the width of the form meaning the background color of the form also makes up part of the header... Can you help?

     I realised I didn't explain myself properly. The header bar seems to be shifted over to the right and keeps on going off the side of the form, also meaning that there is no gap between the left edge of the header bar and the header text which doesn't look very good. I have made the form background yellow so if you preview the form you will immediately see what i mean! 

    header position widget position widget going outside exiting form
  • Profile Image

    Answered by Ben on September 13, 2014 at 05:08 PM

    Hi,

    I took a look at your form (http://www.jotformeu.com/form/42535606641352) and I see what you mean. The issue there was that the header was moved outside of the form by one of your CSS rules.

    If you inject this code at the bottom of your CSS rules you will restore it back

    .form-header-group
    {
      margin-left:0px;
    }

    The part that moved it outside was this:

    header-group
    {

        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: none repeat scroll 0 0 transparent;
        border-color: #e3e3e3 -moz-use-text-color;
        border-image: none;
        border-style: solid none;
        border-width: 1px medium;
        margin: 12px 36px 18px;
        padding: 24px 0;
    }

    Do let us know how it goes and if you have any problems implementing this.

    Best Regards,
    Ben

  • Profile Image

    Answered by Ben on September 13, 2014 at 05:10 PM

    Hi, me again :)

    In case you needed to find how to inject the CSS to the form, you can see that in this nice tutorial here How to Inject Custom CSS Codes

    Best Regards,
    Ben

  • Profile Image

    Answered by jmuskus on September 13, 2014 at 05:55 PM

    Amazing thank you so much! I am just learning CSS coding, very frustrating but enjoyable! One more question regarding this if that's ok! I have added some padding to the header so that the text is not right against the edge but this has pushed the header out on the other side again. I thought it would be logical to reverse that by making the right padding or margin a minus figure but that didn't seem to work...

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 14, 2014 at 02:48 AM

    Hello jmuskus,

    I did check your form and it seems to be displaying the header text correctly. Pleas check the screenshot below:

    Is it not displaying the header text as intended?

    Do let us know your requirement a bit more in detail and we will surely help you.

    Thank you!

  • Profile Image

    Answered by jmuskus on September 14, 2014 at 04:19 AM

    Hi, if you look at the right hand side of the header you can see it is not flush with the rest of the form. This happened because I added 5px padding to the left hand side to move the text in. So just trying to counteract this so all the edges are straight!

  • Profile Image

    Answered by jvd042012 on September 14, 2014 at 04:48 AM

    Hi jmuskus,

    I'm glad your having fun learning or playing with CSS. Please try this CSS code:

    .form-header-group { margin-left: 0px; padding-left: 0px; /* make it 0px instead of 5px */ }

    .form-header { margin: 0px; padding-left: 5px; /* to add 5px padding to Request a Quote */ }

    Let me know if this works for you.

  • Profile Image

    Answered by Ben on September 14, 2014 at 09:48 AM

    Hi,

    The code that jvd042012 has provided above will work for you :)

    You can actually have code like this:

    .form-header-group { margin-left: 0px; }
    .form-header { margin: 0px; padding-left: 10px; }

    The important thing is that you have the padding-left part set in the form-header and not in the form-header-group.

    Do let us know if you have any new questions as you get more familiar with JotForm. :)

    Best Regards,
    Ben

  • Profile Image

    Answered by jmuskus on September 14, 2014 at 10:17 AM

    Hi, yes this worked great, thanks! Only thing I am having trouble with now is the padding on the right hand side of the form but I have another thread for that! You guys have been super helpful!

  • Profile Image

    Answered by Ben on September 14, 2014 at 11:28 AM

    Hi,

    Great to hear that you were able to resolve that issue.

    I am sure that the other issues will be resolved soon as well :)

    Best Regards,
    Ben