Input keeps dropping lower

  • Profile Image
    AgilityAssoc.Canada
    Asked on November 14, 2018 at 10:27 PM

    Hi,

    The other day I asked for help with form 61013950784960 , support no. 1640204.

    I have noticed since that an input element is jumping around, id_57. For each part of the proceeding question, sheet-2-form widget, it drops a bit which makes it a bit strange. The image below illustrates this.

    1542252148lower-lower.png

    How do I prevent this from happening. I know the injected CSS is why, but why?

    While we are at it, I want the widget and id_57 moved right about 20px each for better spacing between each element. I did this but thought you might want to see the code as it was for support #1640204.

    Thank you, Robert



  • Profile Image
    Nik_C
    Answered on November 15, 2018 at 02:55 AM

    I was able to replicate this issue, Robert, please allow me some time to check further and I will get back to you via this thread.

    Thank you!

  • Profile Image
    Nik_C
    Answered on November 15, 2018 at 03:39 AM

    The issue is in the div that changes (the information about if the code entered is valid or not), so when it changes it changes the height which affects that field which is manually positioned with CSS.

    I tried moving it a bit so it is aligned better when the code is entered:

    1542270964screencast.gif

    I used this code: 

    #id_57 {

        width: 150px;

        top: -150px;

        margin-left: 450px;

        margin-bottom: -10.2%;

    }

    Could that work for you?

  • Profile Image
    Kevin_G
    Answered on November 15, 2018 at 11:26 AM

    I have been testing your form and it seems like the issue you're facing happens due to the difference between the elements position, to have them organized and placed in a single single line properly I would recommend you to try with this code: 

    li#id_56, li#id_49, li#id_57 {

        padding-top: 0px !important;

        margin-top: 0px !important;

        top: auto;

    }


    #text_56, #id_57 label{

    margin-top: 0px !important;

    }


    #id_37{

    margin-bottom: 0px !important;

    }

    You may see the result on this cloned form of yours: https://form.jotform.com/83184066720961 

    I hope this helps. 

  • Profile Image
    AgilityAssoc.Canada
    Answered on November 15, 2018 at 11:50 AM

    Hi,

    Disregard... I have what I need now... Testing... TNX

  • Profile Image
    AgilityAssoc.Canada
    Answered on November 15, 2018 at 11:53 AM

    HI,

    THANK YOU.... PERFECT!... PERFECT!  Looks and works just the way it should.

    Best regards to all of you... TNX, Robert

  • Profile Image
    Kevin_G
    Answered on November 15, 2018 at 01:00 PM

    Glad to know that worked. 

    If you need further assistance, let us know.