Horizontal scrollbar is shown on the form showing empty space wider than the browsers width

  • chaofeng
    Asked on October 5, 2015 at 4:38 PM

    Dear Jotform,

     

    I have a weird problem with the horizontal scrollbar, as there's always some extra empty space on the right of the form, even when the browser window is wider than the form width. I am not sure if this is because some of my own css code is messing up with the jotform css, could you please help me to take a look?

    Here's a copy to my form:

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

    Thanks a lot! As always!

     

    Best,

    Chao

    Jotform Thread 676709 Screenshot
    Page URL: http://form.jotform.ca/form/52776025061250?
  • Ben
    Replied on October 5, 2015 at 5:51 PM

    I took a look at your form Chao, and it seems that it is caused by the header at the top. Due to its position being absolute, the 100% width was relative to the window size, not to the width of its parent.

    To fix this you should add the following CSS code to your form:

    div.header-text.httal.htvam {
        display: block;
        margin-left: 30%;
        position: relative;
        width: 65%;
    }

    Do add it after all the other code in your forms custom CSS and let us know how it goes.

  • jonathan
    Replied on October 5, 2015 at 7:30 PM

    If you have responded to this thread recently, your latest response did not reach us. 

    Please click on this link http://www.jotform.com/answers/676709 and send your response again.

    Thank you.

     

  • chaofeng
    Replied on October 6, 2015 at 1:37 PM

    Thanks Ben, 

    You were right, it is the 100% width caused the problem. And thanks a lot for the code. Your fix works well!  

    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

     

    p.s. my early response was not posted somehow so I'm writing again. Thanks!

  • Ben
    Replied on October 6, 2015 at 2:52 PM

    You are welcome Chao, I am glad to hear that :)

    Now in regards to the heading alignment, I have moved this to a new thread here: http://www.jotform.com/answers/677354 for you and we will help you sort it out there shortly :)