How to prevent horizontal "jumping" on the form

  • nicklambson
    Asked on August 7, 2015 at 3:16 PM

    Hi JotForm,

    I want to prevent horizontal "jumping" when the form expands below the visible limit at the bottom of the screen. I understand that a good way to do this is to force the vertical scroll bar to always appear.

    I inject this near the end of my CSS:

    .vertical-scrollbar{

       overflow-y: scroll;

    }

    The form doesn't seem to update to this edit. Any suggestions on how I can do this within JotForm CSS? Maybe I'm doing something incorrectly?

    Thanks!

    Nick

    Jotform Thread 632020 Screenshot
  • BJoanna
    Replied on August 7, 2015 at 4:33 PM

    You can prevent horizontal "jumping" when the form expands below the visible limit, when user click on form collapse tab, by adding ?nojump into the form URL. 

    http://form.jotform.us/form/52185028251147?nojump 

    Hope this will help. Let us know if you need further assistance. 

  • nicklambson
    Replied on August 7, 2015 at 5:50 PM

    Hi BJoanna,

    Thanks for your reply, this is a helpful feature. This prevents any vertical jumping when the form collapse tabs are opened. I will be sure to activate this for my form.

    The issue I was looking to correct is actually horizontal jumping when the scroll bar on the right side of the screen appears, shifting the center justified form to the left by a couple pixels. Is there any way to prevent this other than injecting custom CSS? If I do inject custom CSS to force the vertical scroll bar to always show, how do I do that?

    Thanks for your help!

    Nick

  • Boris
    Replied on August 7, 2015 at 10:11 PM

    Hello Nick, you were on the right track. ;)

    To have the scrollbar always showing, even when the page content is short, we need to set overflow-y: scroll; on the html element. There is no .vertical-scrollbar class on our form's HTML element, so that is why your custom CSS didn't work.

    Please try adding custom CSS to your form:

    html {
      overflow-y: scroll;
    }

    How to prevent horizontal jumping on the form Image 1 Screenshot 30

    How to prevent horizontal jumping on the form Image 2 Screenshot 41

    This will ensure that your form is displayed with its vertical scrollbar always visible, and there will be no more horizontal jumping due to the scrollbar disappearing. Please let us know how it goes.

  • nicklambson
    Replied on August 10, 2015 at 12:24 PM

    Success! Thanks Boris and BJoanna for the help. Both suggestions make my form navigation much smoother.

    Best,

    Nick

  • BJoanna
    Replied on August 10, 2015 at 1:30 PM

    On behalf of my colleague and me, you are welcome.

    Feel free to contact us if you have any other questions. 

  • TeckStyle
    Replied on June 23, 2016 at 1:24 PM

    I added the ?nojump to the (jotform)URL and it works, but is there any inject CSS we can add so we can prevent the vertical jump in an embedded feature?
  • BJoanna
    Replied on June 23, 2016 at 1:54 PM

    @TeckStyle

    I have moved your question to separate thread and we will provide you an answer there shortly. 

    https://www.jotform.com/answers/868131