Fix Alignment of Name and Phone Field

  • miyonimuwc
    Asked on September 30, 2015 at 4:57 PM

    1. suddenly all the boxes like name or phone number have changed such that the 2 boxes are on top of wach other instead of align next to each other, i am not sure how to fix it. 

     

    2. also, i have determined in the preferences that it will be possible to save the changes and come back later but it doesn't work.  (is it a problem because i have chosen to encrypt the form?) 

     

    3. also in section C (page 4) in my form i have 3 text area boxes which i want them to be in rich text mode. is there a way to change the width of these rich text boxes as they are quite thin? 

     

    Page URL: http://www.jotform.com//?formID=52706253771456
  • Chriistian Jotform Support
    Replied on October 1, 2015 at 12:15 AM

    Hi,

     

    I checked your form and I can see what you are reporting. The Name and Phone field are displayed in two lines. 

    Fix Alignment of Name and Phone Field Image 1 Screenshot 30

    Fix Alignment of Name and Phone Field Image 2 Screenshot 41

     

    I am currently checking the issue and try to get  a custom CSS code that will fix this issue. Please give me more time to further investigate the issue. I will get back to you as soon as I get the custom CSS code.

     

    Regarding your other question, I have moved it to a separate thread so we can better assist you. You can check it here: http://www.jotform.com/answers/674196 and http://www.jotform.com/answers/674198. We will attend to your other concern as soon as possible.

     

    Regards.

  • Chriistian Jotform Support
    Replied on October 1, 2015 at 12:36 AM

    Hi,

     

    Can you try to add/inject this custom CSS code in your form to fix the issue in the name and phone field alignment?

    [data-type="control_fullname"] .form-sub-label-container {

    width: 40% !important;

    }

    [data-type="control_phone"] .form-sub-label-container:nth-child(2) {

        width: 60% !important;

    }

    [data-type="control_phone"] span:nth-child(1) input {

        width: 80% !important;

    }

     

     

    To inject this custom CSS code in your form, you can follow the instruction provided in this article: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.
    Regards.