Input keeps dropping lower

  • 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 Screenshot 10

    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



  • Nik_C
    Replied on November 15, 2018 at 2: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!

  • Nik_C
    Replied on November 15, 2018 at 3: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 Screenshot 10

    I used this code: 

    #id_57 {

        width: 150px;

        top: -150px;

        margin-left: 450px;

        margin-bottom: -10.2%;

    }

    Could that work for you?

  • AgilityAssoc.Canada
    Replied on November 15, 2018 at 8:04 AM

    Hi Nic,

    Thank you for looking into this for me.

    I have entered the updated CSS and there is a definite change, id_57 bounces now. So, I did this,

    #id_57 {
        position:absolute;
          left: 32em;
          top: 16.5%;
         z-index: 100;
    }

    Now it stays put. I did try it on different screen sizes and it shifts a slight bit but it is not objectionable. 

    Do you have any reason as to why this might be a bad idea?

    Best regards, Robert

  • Kevin Support Team Lead
    Replied 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. 

  • AgilityAssoc.Canada
    Replied on November 15, 2018 at 11:35 AM

    I'm getting a "woops' 404 on the link. I will try your code.

    I need to know if I'm am replacing some of my code eg: #id_37 and all of my #text_57 and other stuff. Can you send me all your completed css please.

    TNX Robert

  • AgilityAssoc.Canada
    Replied on November 15, 2018 at 11:50 AM

    Hi,

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

  • AgilityAssoc.Canada
    Replied 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

  • Kevin Support Team Lead
    Replied on November 15, 2018 at 1:00 PM

    Glad to know that worked. 

    If you need further assistance, let us know.