What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Keeping hidden form field width

    Asked by ZackSpear on May 08, 2014 at 08:43 AM

    Hey, I have a form located below that is using conditions to hide some fields. I am looking for a way to keep the width of hidden fields for some areas. Right now under section1 we have the days of the week. Once you input a date there are three hiddens fields which show up underneath that column. I am wondering if there is a way (without altering the html) to keep the width of a field even though it is hidden. For example if you fill in wednesdays date the hidden fields show up under the monday column (to the utmost left).

     

    I need an option to allow the fields to stay the width as i am sending my client the edit link for the form and swhe is editing the content upon being sent this. I am able to do it in html with the additon of a table and <tr> however need a solution for the sent link the client receives.

    Page URL:
    http://form.jotformpro.com/form/40483377532962

    hidden form field edit link table content
  • Profile Image
    JotForm Designer

    Answered by egeg on May 08, 2014 at 10:34 AM

    Hi Zack, 

    I was able to do this with CSS Inject, however I'm a bit cautious as this might be able to break other parts of the form. 

    Can you please try adding the css below at the end of your Inject CSS:


    CSS to be injected:

    .form-line.form-line-column { display:inline-block !important; }

    .form-field-hidden{ visibility: hidden; } 


    What happens here is that display:none removes the hidden element from the document flow, while visibility:hidden keeps the flow but simply renders the element invisible. Which is what you needed.

    The problem is that this fix will apply itself to all hidden elements. If that's ok, then no problem. But if it's not we might need to write a selector that will apply this fix only to the selected elements. If that's the case let us know and we'll help right away.

    Thanks & have a good day!