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

    How to expand my column width so my options don't overlap?

    Asked by amafitnesscenter on April 23, 2013 at 10:30 AM

    I did or tried the following:

    Align Left

    Align Top

    Expand

    Make the form wider

    Try differnt qty# of columns

     

    But same result... ugly 

    How do fix this?

     

    Page URL:
    http://www.jotform.com//?formID=31124581833147

    expand column width wider align left qty
  • Profile Image

    Answered by pinoytech on April 23, 2013 at 10:55 AM

    Hi,

    Try to inject this custom css into your form and see if the said issue still persist or not.

    .form-label-top {

    width: 750px !important;

    }

    You can check this clone form: http://www.jotformpro.com/form/31124472407951?

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image

    Answered by amafitnesscenter on April 23, 2013 at 12:32 PM

    I tried that and it didn't seem to make any difference... so I just put it all back to one column...

    I've never had any luck with trying to get the columns to spread full width... even it I make the form super wide... just to see if it will adjust...

     

    This seems like something that could be addressed in Jot Form.. but thanks for trying.

  • Profile Image

    Answered by glennlee on April 23, 2013 at 12:57 PM

    @amafitnesscenter,

    If you cannot see the changes you made on your form, please try to clear your browser cache then try it again. I also cleared your form cache in our end. Please see if it helps. 

    Please tell us which field is needed to be wider. So we can give the custom css. 

     

    Thanks,

  • Profile Image

    Answered by amafitnesscenter on April 23, 2013 at 01:01 PM

    The fields that needed to be wider are to accommodate all the options for answers for the question about "Primary Reason" someone is emailing them...  

    It is the first question after name/email/phone... 

    I saw no change after I implemented the css. I am fairly certain I cleared my cache.

    But I can change it back to 2 or 3 columns, and try again... if you think it will work.

  • Profile Image

    Answered by amafitnesscenter on April 23, 2013 at 01:02 PM

    The fields that needed to be wider are to accommodate all the options for answers for the question about "Primary Reason" someone is emailing them...  

    It is the first question after name/email/phone... 

    I saw no change after I implemented the css. I am fairly certain I cleared my cache.

    But I can change it back to 2 or 3 columns, and try again... if you think it will work.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 23, 2013 at 01:55 PM

     

    Hi,

    I'm not sure what you mean there. The injected custom CSS codes actually works on your form.

    With the injected CSS codes (new line):

    Without the injected CSS codes (all in one line):

    Do you mean the width when you received this to your email address after someone hits submit button? If so, you need to access Form Notification. Adjust the Width by clicking on the Table Properties tool/button;

    For Table Properties Information:

     

    Thanks

     

  • Profile Image

    Answered by amafitnesscenter on April 23, 2013 at 02:27 PM
    No, you are totally misunderstanding me…

    I’VE TRIED 2 COLUMNS AND 3 COLUMNS, AND MAKING FORM WIDER, AND STILL THIS HAPPENS:

    http://awesomescreenshot.com/05d174mf0b

    You can now see that the “answers” are overlapping…

    I did this on a “clone” of my form so you could see, since my other form is just in one column now.

    http://form.jotform.us/form/31125539202141

    Christine

  • Profile Image
    JotForm Support

    Answered by Welvin on April 23, 2013 at 02:57 PM

    Hi Christine,

    Sorry for that and thanks for providing us a screenshot. This explains everything! I guess this is an issue that our developers need to resolved. Please open a separate thread about this so we can forward that to our developers, include the screen on the new thread.

    For now, to fix that,inject this custom CSS codes to your form:

     

    #input_6_1, #input_6_4{

    margin-left: 70px;

    }

    #input_6_2, #input_6_5 {

    margin-left: 118px;

    }

    Guide: How to Inject Custom CSS Codes

     

    Or, simply use one column.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on April 23, 2013 at 03:04 PM

    Hi,

    I check again the form and find the reason why the field options overlaps to each other. You have shrink the field, please expand to fix that;

    Again, please consider creating another thread for this particular issue (when the checkbox field is shrank down, the options overlaps to each other) so we can forward that to our developers.

     

    Thanks for reporting.

  • Profile Image

    Answered by amafitnesscenter on April 23, 2013 at 03:26 PM
    I am fairly certain I also tried with expand… I tried all different ways to fix.
    You say to do it, but did you try it first on that form?

    Christine

  • Profile Image
    JotForm Support

    Answered by Welvin on April 23, 2013 at 03:30 PM

    Hi Christine,

    Here's a clone version of your form with the expanded field: http://form.jotformpro.com/form/31126061482950?.

    You'll see, the text does not overlaps. Although, it doesn't auto adjust to the left to align the options into a single row.

    Screenshot:

     

    Thanks

  • Profile Image

    Answered by amafitnesscenter on April 23, 2013 at 03:38 PM
    Correct… that’s why I didn’t like that solution either… it wraps when there is enough width/space for it not to have to…

    Christine

  • Profile Image
    JotForm Support

    Answered by Welvin on April 23, 2013 at 03:40 PM

    Hi Christine,

    We can always adjust a certain field through custom CSS Injection. You may consider shrinking the field back then inject the custom CSS codes I have provided to your form.

    And again, please create a separate thread concerning that matter so we can forward that to our developers. 

    Cheers!