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

  • Profile Image
    paimn
    Asked 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 ~

  • Profile Image
    EduardoMendez
    Answered 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
    paimn
    Answered 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
    idarktech
    Answered 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
    paimn
    Answered on January 17, 2013 at 04:33 PM

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

  • Profile Image
    pinoytech
    Answered 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
    leo_corder
    Answered 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
    sidharth_kch
    Answered 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
    leo_corder
    Answered 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
    KadeJM
    Answered 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
    leo_corder
    Answered 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
    jonathan
    Answered 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
    leo_corder
    Answered on June 07, 2013 at 07:13 AM

    Thanks, @jonathan.

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