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

  • chaofeng
    Asked on October 6, 2015 at 2: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

  • Ben
    Replied on October 6, 2015 at 3:09 PM

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

    The header position seems to always be left algned to the elements not the page Image 1 Screenshot 20

    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 :)

  • chaofeng
    Replied on October 6, 2015 at 4: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

  • Mike_G JotForm Support
    Replied on October 6, 2015 at 7:22 PM

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

    The header position seems to always be left algned to the elements not the page Image 1 Screenshot 40

    And when it is loaded completely,

    The header position seems to always be left algned to the elements not the page Image 2 Screenshot 51

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

    The header position seems to always be left algned to the elements not the page Image 3 Screenshot 62

    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.