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

    Shrink fields are not working as expected when using Solid Form theme

    Asked by paimn on January 16, 2013 at 06:32 PM

    I'm having a problem getting several of the fields on my form to shrink next to each other.  I've completed the steps to shrink both fields to one line and it looks good in the editor, but in the actual form they are not shrinking.  It doesn't seem to be a conflict with the injected CSS code as I removed that as a test and they were still not lining up.

    The problem is on the Dates of Employment, From and To in the first 4 sets of previous employment data, oddly the 5th one is fine.

    Can someone tell me what I can do to correct this?

    Thank you ~

    Page URL:
    http://form.jotform.us/form/30125154950143

    shrink shrink fields JotForm problem css code
  • Profile Image
    JotForm Support

    Answered by EduardoMendez on January 16, 2013 at 08:19 PM

    Hi there, 

    I have looked at your form.  Are you still having the issue?

    Here is a video of what your form looks like:

    http://screencast.com/t/aFnnQ4UyoYi

    Let us know if you need further assistance!

  • Profile Image

    Answered by paimn on January 16, 2013 at 10:17 PM

    Thank you, that was helpful, so I was able to narrow it down to a browser issue (I believe).  It's fine in IE7, but not 8 or 9 and FireFox.  Any ideas on how to correct it?

  • Profile Image
    JotForm Support

    Answered by idarktech on January 16, 2013 at 11:04 PM

    Thanks for specifying the browser details.

    I was able to see the problem on the mentioned browsers. This is probably caused by the matrix field text wrapping, the width of the form increases due to this which caused the shrink fields to jump on the top. To fix this,

    1. Edit you form in the form builder

    2. Right click on the Dates of Employment (mm/yr) fields

    3. Select "Move to a new line"

    4. Check this visual guide.

    Thanks!

  • Profile Image

    Answered by paimn on January 17, 2013 at 04:33 PM

    That did the trick!  Thank you so much for your assistance.

  • Profile Image

    Answered by pinoytech on January 17, 2013 at 04:34 PM

    Its our pleasure to assists you. If you need our assistance again, feel free to contact us at anytime.

    Have a great day!

  • Profile Image

    Answered by leo_corder on June 06, 2013 at 01:44 PM

    I'm having a similar problem on my form.
    The shrinked fields looks good in the editor, but in the actual form they are larger and mangled.

    Can someone help me? 

    Page URL: http://form.jotformz.com/form/31473083580655


    Edit: Notice the problem occurs only with Solid Form theme. Could it be a bug?

  • Profile Image

    Answered by sidharth_kch on June 06, 2013 at 03:00 PM

    @leo_corder

    I checked your form and see that width of your form is more. I have reduced your form width. Please let us know if it looks okay with you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by leo_corder on June 06, 2013 at 03:06 PM

    The width of the form still is 1024 and the problem remains. But the form was ok yesterday.. and today, without any modification, the problem appeared.
    Notice the problem occurs only with Solid Form theme. Could it be a bug?

    The problem seems to be in some width auto-adjustment property of the shrunken field.

  • Profile Image
    JotForm Support

    Answered by KadeJM on June 06, 2013 at 04:18 PM

    I think I understand what you are referring to. Can you please confirm what you see in the Image below is the problem you speak of for comparison so that I know we are all on the same page of understanding about this?

    I would also like to suggest that you please try clearing your form cache to see if this helps at all.

  • Profile Image

    Answered by leo_corder on June 06, 2013 at 04:28 PM

    Yes, the problem is exactly this.

    I cleaned my form cache like you said, but I'm still having the same problem.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 06, 2013 at 06:28 PM

    @leo_corder

    Hi, 

    I am able to reproduce this issue on the solid theme. 

    I was able to termporarily fix this by injecting this CSS code on the form

    .form-input{width:auto;}

    Use this guide on How-to-Inject-Custom-CSS-Codes . Here is a test form using a clone of your form http://jotformpro.com/form/31566457488973?

    Unfortunatelly, for fix resolution, I can only suggest using other themes if you want to utilize the alignment (shrink) for your current form.

    I will do elevate the issue to our next level support so that it can be investigated to further and hopefully a quick fixed can be done on the solid them CSS.

    Thanks.

  • Profile Image

    Answered by leo_corder on June 07, 2013 at 07:13 AM

    Thanks, @jonathan.

    This CSS code fixed the problem, indeed.
    Thank you for the support.