Display:none Vs Visibility:hidden

  • Profile Image
    Asked on October 16, 2013 at 09:24 AM

    Hi there,


    I start working with jotformpro since few days and discovered how poweful yet flexible it is. Great job!

    I created a form but then needed to highly customize it. So I just copied the source and modified it a bit to fit my customer needs.

    As I tried to use the "conditions" section to hide a section if another one's field is filled, I discovered that you are using display:none instead of visibility :hidden. The thing is I need the hidden section space to still been allocated.


    Hope I was clear. Let me know if not.




  • Profile Image
    Answered on October 16, 2013 at 10:10 AM


    We have the display:none so that the hidden fields won't create a space to the form - to make the form fields close to each other.

    I'm not sure if you can modify the properties using the source codes (without the whole form files). OR, not sure if that won't cause any issues to the form.  However, I think that is possible with overriding the CSS with another CSS - I'm talking of the positioning of the fields.

    Also, can you please let us know how we can see that issue to the form? I've tick the Car Model but couldn't see that. 


  • Profile Image
    Answered on October 16, 2013 at 10:48 AM

    Hello Shams, In addition to my colleague's response I on the other hand first wanted to thank you for your comment about Our Platform. I believe that I do understand your reasoning behind the Argument you've made of the differences between Display: None vs Visibility: Hidden.

    Reference : 


    However, let me point out that our forms are fully customizable using the form's Source Code so you are more then welcome to change certain things on the form to rebuild it more to your specifications if you would like should you have the know-how or if you are willing to hire a professional programmer to modify it for you. But be advised that this would have to be done outside of JotForm and there is always the risk of breaking it if you change out important parts of the form that are used to run it since we use non-allocation for such.

    Alternatively though as my colleague mentioned you could use Injected CSS to try to attempt to override it which may work to your advantage because this is an overhaul which takes priorority over the coexhisting css on the form. It will probably require further tweaking to get it just the way you want it to be and the addition use of the form's Source Code with customization may help.

    I believe our Developers went with this because of the way it works so using that was probably better suited with how our form's currently run in our system.

    Lastly, Even though my colleague was unable to replicate this upon selection I, However was able to do so in the same manner you have pointed out on your website. It also seems to me that perhaps you are trying to make this change to allocated space so due to this factor it  has most likely shifted your form forcing it into an " Offset " Status of the container holding this information which appears to have created this conflict.

    I take it that this is what you are actually trying to correct so that it is not Offset like what you have shown and I've depicted in the screenshot below?




  • Profile Image
    Answered on October 17, 2013 at 05:07 AM

    Thank you for your reply.

    OK I understand that my request is special and I will try to avoid using the "Conditions" functionality as it adds the "display:none" style inline not as a class which could allow me to override it with custom css.

    My custom link is http://detouruae.com/merc20131/index.html and I'm using Chrome under Win7. Please check it out under the indicated env. to replicate what I'm seeing.



  • Profile Image
    Answered on October 17, 2013 at 11:00 AM


    Sorry, I am checking any possible solutions right now. I accidentally pressed the reply button while typing so please ignore my first reply. We'll get back to you with updates sometimes later.


  • Profile Image
    Answered on October 17, 2013 at 11:41 AM

    Hi there,

    As per your request, here's the modified jotform.js file with the changes from display:none to visibility:hidden condition. 


    You can download this js file and replace the existing jotform.js script on your form source code.

    Hope this helps. Thanks!