How can I adjust the positioning of a form so that it sits at the very top of the page?

  • FLXAPI
    Asked on April 28, 2016 at 4:23 PM

    I created a form that I am embedding within an otherwise blank web page. I managed to adjust the CSS so that the form is left-aligned on the page, but there is still a fair amount of empty space above the form, and I would like to eliminate this space so that the top of the form sits closer to the top of the page. I found some information on this in your support material, and I did make the suggested adjustment to the CSS. Namely:

    .form-all {
    width: 650px;
    margin: 0 !important;
    padding: 0 !important;
    }

    This has not solved the problem, however, and I am now at a loss as to how to proceed. 

    Please let me know what additional CSS adjustments must be made in order to bring the top of the form closer to the top of the web page. (Note that the attached screen shot should help bring clarity to the issue and what it is that I am looking to accomplish.)

    Regards.

    Jotform Thread 828859 Screenshot
  • Ben
    Replied on April 28, 2016 at 4:48 PM

    To do that you can add the following code to your form: [CSS] Remove padding at the top

    Once you do it should remove the padding. If it does not, please do let us know the link to the same page and we would be happy to look into it for you and see what exactly is making it as such.

  • FLXAPI
    Replied on April 29, 2016 at 9:26 AM

    Thanks for the reply. I added the CSS code that you recommended and that did the trick.

  • FLXAPI
    Replied on April 29, 2016 at 9:42 AM

    But talk about frustrating. After I managed to manually get all of the CSS in order, I went into the Form Designer in order to make the form a little bit wider. I added just a hint of width to the overall form and then discovered that doing so also resulted in ALL of my previous CSS modifications being reset to the default. So -- Now the form is again not aligned properly, the excessive margin at the top has reappeared, and all of the color changes that I had made have been lost. Ridiculous!

  • Ben
    Replied on April 29, 2016 at 10:38 AM

    What I would like to suggest is to restore your form back to the previous - working layout. You can see how to do that here: How to View Form Revision History

    Now once you do, just let us know the desired width, and we can give you the CSS to do the same.

    Depending on the CSS, some changes might be made when the new CSS is added, but if that happens we would be happy to assist with the same.

  • FLXAPI
    Replied on April 29, 2016 at 10:43 AM

    Thanks again. By the time I received your latest reply, however, I had actually already gone back into the CSS and recreated all of the changes that I had previously implemented. Good to know that JotForm does offer a restore function. (I was very surprised when a simple change in the width of the form -- via the Designer -- resulted in ALL prior CSS modifications being wiped out.)

  • Ben
    Replied on April 29, 2016 at 11:00 AM

    As far as I know there are currently some changes being made in the way designer themes are being loaded/saved, I can only presume that something made that specific configuration be reset in a way due to the same.

    I am happy to hear that you were able to restore them, but if it happens again, feel free to let us know and we would be happy to assist with the same as well.

  • FLXAPI
    Replied on April 29, 2016 at 11:34 AM

    Appreciate the support. For the moment, I think I am in OK shape with this one. Regards.

  • Ashwin JotForm Support
    Replied on April 29, 2016 at 12:41 PM

    Hello FLXAPI,

    On behalf of my colleague, you are welcome. 

    Do get back to us if you have any questions.

    Thank you!

  • FLXAPI
    Replied on April 29, 2016 at 2:05 PM

    Will do. Thanks.