Why did all of my Form fields expand

  • desotoisd
    Asked on November 12, 2014 at 3:46 PM

    I was using the Form Designer to change the color of my font. After i changed it and checked it in the preview window, all of my input fields are now stretched as if expanded.I have them all set to shrink, and it looked great, until i used the form designer to change the font color. Any clue why this happened?

  • Ben
    Replied on November 12, 2014 at 4:54 PM

    Hi,

    Please go to your Form Designer and make sure that the field "Make this form responsive" is unchecked and it should be set back as it was before.

    Why did all of my Form fields expand Image 1 Screenshot 20

    If this does not help, do let us know.

    Best Regards,
    Ben

  • desotoisd
    Replied on November 12, 2014 at 5:05 PM

    I changed that option, but still have odd spacing and alignment Issues. I included a link to the site in question. I managed to sort of fix the issue of input fields being stretched to the max but adjusting the input width, but now i am having issues with other things either overlapping text (see phone numbers) or text stretching off the page (see last page check boxes)

  • Ben
    Replied on November 12, 2014 at 5:10 PM

    Hi,

    I do not see a link to your website, only a direct link to jotform.

    Once I went to it I am not able to see any issues with the fields or layout.

    Why did all of my Form fields expand Image 1 Screenshot 20

    Can you please give me the link to the page on your website where the jotform is included in?

    Best Regards,
    Ben

  • desotoisd
    Replied on November 12, 2014 at 5:14 PM

    http://form.jotformpro.com/form/43095838310960

  • Ben
    Replied on November 12, 2014 at 5:22 PM

    Hi,

    Yes, that is where the screenshot was taken at. That is a direct link to jotform.

    Could you please tell us at which section should we be looking at then?

    Best Regards,
    Ben

  • desotoisd
    Replied on November 12, 2014 at 5:25 PM

    The last 2 sections. Area Code is over lapping phone number in section 2 and Text continuing off the page on the check box tool in the last section.

  • Ben
    Replied on November 12, 2014 at 5:44 PM

    Hi,

    Oh, yes, you are right, I have missed that looking for wide fields.

    To resolve the issue with the Phone Number and Area Code fields all we need is to inject this CSS:

    span.form-sub-label-container:nth-child(2) {
        padding-left: 18px;
    }

    Now to correct the checkbox text, we would need to add line breaks in the text at specific locations. To do this we will use HTML element that will do this for us <br/>.

    So this would be the text to add to checkboxes:


    I understand that my student must make a significant commitment of effort and<br/>time if accepted into the DeSoto CMP
    I understand that my child will be required to devote a minimum of two hours<br/>each evening to homework and/or studying.
    I understand that my child will be taking college-level courses that will be taught<br/>at the college level. I further understand that the adjunct professors<br/>teaching these courses will only communicate with my child per DCCCD student privacy rules.
    I understand that my child may be exposed to college-level materials and some<br/>assignments may require reading adult/collegelevel materials not typically discussed<br/>in high school.
    I agree to support my child and make every effort to make sure my child is<br/>present and on-time daily.
    I understand satisfactory progress, demonstrated self-discipline, and regular<br/>attendance are mandatory for continued study in the DeSoto CMP.
    I agree to attend and support school functions including Open House, PTSA<br/>meetings and conferences.
    I will encourage high academic and behavioral standards from my child.
    I understand that there may be time that DeSoto CMP will operate on a calendar<br/>similar to the DCCCD. This means that my child may be required to be in attendance<br/>when DeSoto ISD is in session as well as when DCCCD is in session.
    I understand that I am expected to volunteer at DeSoto CMP a minimum of<br/>six (6) hours per semester.
    I agree to bring my child to required tutorials and/or events when assigned<br/>by a CMP faculty/staff member.
    I will encourage my child to exhibit the Six Pillars of Character:<br/>Trustworthiness, Respect, Responsibility, Fairness, Caring and Citizenship I understand<br/>that my child must comply with DeSoto ISD and DCCCD regulations at all times.
    I understand that students unwilling or unable to continue studies at<br/>the DeSoto CMP will be reassigned to a corresponding DHS Academy or their home school I<br/>understand that any academic, attendance, or behavioral problems will be sufficient cause<br/>to rescind admission to the DeSoto CMP I understand that if admitted to the DeSoto CMP, my<br/>child must read, sign and abide by the CMP policies and CMP agreement.

    Now you can edit those <br/> tags by moving them where you want to break the line and start a new one. You can also use <b>around some work</b> to make it bold and such similar HTML styling elements as these.

    The key is to add them in the options list, not by double clicking on them and then clicking on OK. You must click on OK every time you make the change and you want it to get saved.

    Why did all of my Form fields expand Image 1 Screenshot 20

    Do let us know how it goes for you.

    Best Regards,
    Ben

  • desotoisd
    Replied on November 13, 2014 at 9:51 AM

    Thanks Ben! That worked great. I really appreciate your help!

  • KadeJM
    Replied on November 13, 2014 at 10:34 AM

    Glad to see that worked out for you and on behalf of Ben you are very welcome!