Form Designer shows correct layout, but Form Builder does not - and it is the same when embedded on a website

  • glenpoolps
    Asked on June 25, 2015 at 10:48 AM

    Here are a total of 4 screenshots to show what I am facing:

    Picture 1 is how it looks in the CSS tab (and how I want it to look and have saved it).

    Picture 2 is how it looks in the form builder and on our live site. Slight differences and yet NOT how I saved it in CSS! Secondary Phone Number is on two lines and the Select One Label has moved to the top instead of to the left where I put it!Form Designer shows correct layout, but Form Builder does not   and it is the same when embedded on a website Image 1 Screenshot 50

    Form Designer shows correct layout, but Form Builder does not   and it is the same when embedded on a website Image 2 Screenshot 61

    Picture 3 is from the CSS tab and exactly how I want it to look.

    Picture 4 is how it shows up in form builder and on our live site. NOT CORRECT! Again, it is slight and a preference in layout, the point is the Save feature is not working!

    Form Designer shows correct layout, but Form Builder does not   and it is the same when embedded on a website Image 3 Screenshot 72

    Form Designer shows correct layout, but Form Builder does not   and it is the same when embedded on a website Image 4 Screenshot 83

  • Ben
    Replied on June 25, 2015 at 10:55 AM

    I am looking at your images above and to me it seems that the issue is with the width.

    The width of the 1st image of both groups seems to be wider than the one on the second ones.

    This can be seen by the labels using much more space instead of being 'broken' into several lines.

    Could you please give us the link to your page on your website where the form is embedded so that we can take a look at it and let you know if width is truly the cause of this, or if it is something else and how to resolve it?

  • glenpoolps
    Replied on June 25, 2015 at 5:58 PM

    Precisely!!! I have been working to adjust the label lengths so that the form elements appear as I wish them to appear (the way they appear in the original form which was imported into Jotforms!)

    The problem is none of these CSS edits which I painstakingly worked to make seem to be "taking" or "sticking". I don't understand what the problem is because on the CSS screen, everything looks as I intend it to be; however when I look at the form post-CSS edits in the form builder OR in our live version, everything is scrunched/the label lengths are totally messed up and not at all how I set them.

    By the way, I do not want my labels on top in these instances. I want them beside the blanks and/or dropdowns. There should be plenty of space to put these side-by-side. Again, it shows that way from the CSS screen.

    Ok I sure hope this is the correct link:

    http://form.jotform.us/form/51402544611141

    The form I am currently working with is called: Employment - Certified Staff Application.

    Thank you for your help.

  • Elton Support Team Lead
    Replied on June 25, 2015 at 10:56 PM

    Hi,

    I checked the injected CSS and they are all correct except that they are not taking effect on the live version since they are overpowered by the default styles assigned to the labels. The easiest way to resolve this is to add !important after the property value.

    Example:

    #label_504 {
    width: 170px !important;
    }

    The following CSS codes will correct the ones in your screenshots.

    #label_504, #label_505  {

      width: 170px !important;

      }

    #label_17, #label_20 {

      width: 80px !important;

     }

     #label_189 {

      color: #404040;

      width: 256px !important;

    }

    #label_191, #label_194, #label_492 {

      color: #404040;

      width: 250px !important;

    }

    Or find all the injected CSS codes in to your form specially the ones with label IDs and add !important to it. That should also work.

    Thanks!

  • glenpoolps
    Replied on June 29, 2015 at 2:41 PM

    Wonderful! That helps very much! Thank you!