How to reserve a hidden field's position on the form's layout

  • rwaldenjr
    Asked on September 12, 2017 at 12:21 AM

    I have a form that currently contains two shrunken fields; one hidden, and the other visible. I want to get the form into production ASAP before I have time to work on programming the hidden field's intended "auto-fill" feature. And once I do, I want to simply make that field visible again, and the rest of the form look exactly the same.

    The hidden field was originally on the left-hand side of the page (see note, below). And because its hidden, the field on the right-hand side of that line slid into its place when published, allowing the left-hand field of the next line to jump up a line to the right-hand position, as they typically do. However, I'd like to reserve the hidden element's space on the left-hand side of Line 1, despite its being hidden. How do I do that?

    [Note: see the first two lines of page 4 ("Current Background" section) of my "Contractor Questionnaire" form. To save time, I've rearranged the position of the top two fields of Line 1, placing the hidden field I speak of on the right-hand side, and setting the next line's shrunken element to "Move to a new line". That works, but I'd still like to have the hidden field on the left. At this point, is it only possible to preserve a shrunken element's space if its on the right-hand side of a form?]

  • BJoanna
    Replied on September 12, 2017 at 1:42 AM

    Is this what are you trying to achieve? 

    How to reserve a hidden fields position on the forms layout Image 1 Screenshot 20

    You can set the hidden field on the left side inside of the form builder and add this CSS code to your form:

    li#id_190 {

        margin-left: 347px!important;

    }

    How to Inject Custom CSS Codes

    The CSS code will push the visible field to the right. 

    Once you decide to disable the Hide field option for the other field, remove the CSS code from the form. 

    Here is my demo form: https://form.jotformpro.com/72540823566964 

    Feel free to test it and clone it

    Hope this meet what you are looking for.

  • rwaldenjr
    Replied on September 12, 2017 at 2:14 AM

    Yup, that does the trick BJoanna! I should have known there was a CSS method of accomplishing this.

    In regards to this problem, it might be a useful feature request to have an additional checkbox that is activated when SHRINK is turned ON, which allows the user to specify whether or not an element is to float like these had been, or be assigned to a fixed left-hand (or right-hand) position on the form, which would then activate or deactivate the necessary CSS code in the background.

    Thanks for the code!

  • rwaldenjr
    Replied on September 12, 2017 at 2:25 AM

    What just happened? After opening your response in my browser and replying to it, now all of a sudden my JotForm web pages are all funny looking, like somehow the HTML or CSS code was altered (see screenshots, attached). I'm using a Chrome browser. Any idea what happened, and how to return it to normal???

    (Btw,are you guys in the midst of a site change without notifying us? Now, all of a sudden, my JotForm web pages have a blue and white color scheme, instead of the black and orange I've been used to!?! What's happening?)

  • Elton Support Team Lead
    Replied on September 12, 2017 at 3:12 AM

    @rwaldenjr

    Yes, there was a major user interface update recently on the support pages. 

    The support forum UI should be fine by now. There was just a minor issue on the first release but it has been fixed right after.

    We hope you like the new forum style. Feel free to open a new thread if you have any feedback.

    FYI, this update does not cover the forum builder or the forms, only the support pages.

    Thank you!