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

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

    Asked by chaofeng on October 05, 2015 at 04: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

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

    Screenshot
    horizontal form width JotForm css code
  • Profile Image

    Answered by Ben on October 05, 2015 at 05: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.

  • Profile Image
    JotForm Support

    Answered by jonathan on October 05, 2015 at 07: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.

     

  • Profile Image

    Answered by chaofeng on October 06, 2015 at 01: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!

  • Profile Image

    Answered by Ben on October 06, 2015 at 02: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 :)