Why does the input field on my form jump based on an input value?

  • AgilityAssoc.Canada
    Asked on November 29, 2018 at 12:44 PM

    Hi,

    For form 70563229843965, I just added an number field, #input_72. I copied some CSS code I used for the same field from 61013950784960. 

    Now for some reason if a value less two is entered the field jumps up. So any value that starts with 1 jumps up then down again, ie. 11. I am perplexed as to what could be possibly be doing this is my code or conditions. 

    1543513419JF Jumping Field Screenshot 10

    I don't have this issue on form 61013950784960.

    It must be in the CSS code???

    Best, Robert

  • Girish JotForm Support
    Replied on November 29, 2018 at 1:34 PM

    I was able to replicate your issue.

    When I inspected your form, the Field #ID_72 has a top margin set in % rather than a static pixel value, which suggests that the position moves when the length of the form varies. 

    To fix this, you will need to use the following code for #id_72 field.  

    /* your number */

    #id_72 {

        position : absolute;

        width : 200px;

        left : 28em;

        top : 18.5%;

        top : 260px;

        margin-top : 20px !IMPORTANT;

        z-index : 72;

    }

     

    #input_72 {

        text-align : center;

        font-weight : bold;

        font-size : 1.2em;

    }

     

    #id_72 label {

        width : 290px;

        font-size : 0.86em;

        color : yellow;

        margin : 1.2% 0;

    }

    Please inject the above CSS code, which should fix the issue. Please see the cloned version of your form - https://form.jotform.me/83325257832459 

    Let us know if this solution suits you.

  • AgilityAssoc.Canada
    Replied on November 29, 2018 at 8:49 PM

    Hi,

    I changed the value to top:260px, now it works as it should. It makes sense that the % value would have that.

    Thankyou, best regards, Robert

  • AgilityAssoc.Canada
    Replied on November 29, 2018 at 8:54 PM

    I don't see your response posting here only my response, see image below of my view. 

    Robert

     

    1543542794missing answer Screenshot 10

  • roneet
    Replied on November 30, 2018 at 5:17 AM

    The answer is posted here as well.

    Refer to this screenshot:

    Why does the input field on my form jump based on an input value? Image 10

    Please clear the browser cache and then log in again.

    Thanks.

  • AgilityAssoc.Canada
    Replied on November 30, 2018 at 9:24 AM

    Thank you,

    First time this has happened after years of use. I will try again after clearing as it appears to be happening again.

    Robert


  • AgilityAssoc.Canada
    Replied on November 30, 2018 at 9:35 AM

    Hi

    So as you see I am not getting all your responses even after clearing the cache. I will logout / In and try again.


    1543588500missing answer3 Screenshot 10


    Robert is confused???



  • AgilityAssoc.Canada
    Replied on November 30, 2018 at 9:42 AM

    Hi,

    I logout / In and I still am not seeing all your responses and I'm getting the 1 more results click to see them notice.

    I will not make any more posts here. This should be a new thread.

    best, Robert