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

  • Profile Image
    chaofeng
    Asked 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

  • Profile Image
    Ben
    Answered 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
    chaofeng
    Answered 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
    Mike_G
    Answered 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.