How to prevent horizontal "jumping" on the form

  • Profile Image
    nicklambson
    Asked on August 07, 2015 at 03: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

  • Profile Image
    BJoanna
    Answered on August 07, 2015 at 04: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. 

  • Profile Image
    nicklambson
    Answered on August 07, 2015 at 05: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

  • Profile Image
    Boris
    Answered on August 07, 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;
    }

    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.

  • Profile Image
    nicklambson
    Answered 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

  • Profile Image
    BJoanna
    Answered on August 10, 2015 at 01:30 PM

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

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

  • Profile Image
    TeckStyle 
    Answered on June 23, 2016 at 01: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?
  • Profile Image
    BJoanna
    Answered on June 23, 2016 at 01: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