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

    The header position seems to always be left-algned to the elements not the page

    Asked by chaofeng on October 06, 2015 at 02:51 PM

    I just got another small issue with the header: when loading the form, the header will always be left-aligned to the left edge of the input field divs, rather than the edge of the whole page as I hoped. This might have something to do with the position setting "position: absolute" again, but I'm not really sure. Can you help me to take a look for this too?

     http://form.jotform.ca/form/52776025061250?

    Thanks as always!

     

    Best,

    Chao

    header position logo css align form fields
  • Profile Image

    Answered by Ben on October 06, 2015 at 03:09 PM

    Looking at your form at this time Chao, I believe that that is how you want it to be:

    Now if that is true, you should be able to simply add the following CSS to the form:

    .form-header-group.hasImage > .header-text.httal.htvam {
        width: 33%;
    }

    - without adding any other - just add the one above to the current CSS code in your form.

    It will look as on the image and remove the scroll bars.

    If by some chance you meant something else, do let us know and we would be happy to check that out and help you with that as well :)

  • Profile Image

    Answered by chaofeng on October 06, 2015 at 04:10 PM

    Hi Ben,

    Thanks for taking another look! And sorry I made it unclear, your fix worked great and I managed to get rid of the horizontal scroll bar. 

    What I meant was, when the form is loading, the left edge of the header would first be aligned to the left edge of the form input fields, that is, the logo image will be shown above the texts on the right side of the page in the grey area, while the heading "Digital Graffiti Wall" will be shifted to further right side next to the logo.

    I'm wondering if there's something wrong with my custom CSS. 

    Thanks again for the help!

    Best,

    Chao

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 06, 2015 at 07:22 PM

    When your form is loading the logo would first appear on the right edge of the form, like this

    And when it is loaded completely,

    I just like to confirm: Is this what you would like to happen?

    If it is, you can achieve that by adding this code to you form 

    #cid_404{

    position: relative !important;

    left: 240px !important;

    }

    .header-logo{

    background-color: #F3F5F9 !important;

    }

    Let us know if you need any further assistance and we will be glad to help you. Thank you.