Sub label field, date field, and address field too long, running off page

  • minemetitiri
    Asked on January 29, 2016 at 1:53 PM

    I recently made a page in collaboration with someone else.

    I don't know how, but the sub labels, address, and date field are all out of whack.

     

    The sub label text in some sections are too long.

    The address and date sections are now breaking all over the page in the build page, and go completely out of the frame in the preview page.

     

    How do I fix the width of the sub label text so everything fits within the width of the text box.

    How I do I fix the address and date from running off the page.

     

     

    Thanks

  • Mike_G JotForm Support
    Replied on January 29, 2016 at 10:48 PM

    Adding the CSS codes below with the help of this guide, How-to-Inject-Custom-CSS-Codes, will make your form somehow fixed. 

    .form-sub-label-container{

    width: 400px !important;

    }

    .form-sub-label-container input, .form-sub-label-container select, select{

    width: 400px !important;

    }

    label.form-sub-label{

    width: 800px !important;

    white-space: normal !important;

    }

    #id_59 label.form-sub-label, #id_19 label.form-sub-label, #id_63 label.form-sub-label, #id_78 label.form-sub-label{

    width: 440px !important;

    white-space: normal !important;

    }

    #id_25 .form-sub-label-container input, #id_25 .form-sub-label-container{

    width: 240px !important;

    }

    .form-textarea{

    width: 800px !important;

    }

    I would still suggest you check your form for any fields that's out of place or having a different width from what you would prefer to have and inform us. Kindly give us more details in describing what you would like for a specific field to look like. 

    Here's a clone version of your form that I have used for testing the codes above: https://form.jotform.com/60287929657977

    We will wait for your response. Thank you.

  • minemetitiri
    Replied on January 31, 2016 at 11:32 AM

    Hello Thanks for your response to my question,

     

    I saw the clone an although it fixed the issue, the fields are now appearing too large. 

    Here is a link to a similar form that is the same but for a different audience and purpose, here the form looks exactly how I want it to look. What I would prefer is that the form look exactly like this form https://form.jotform.com/60046541086148

     

    Can I edit the CSS code above to get this result for this form https://form.jotform.com/60038432878157 <---this is the one I need to fix to look like the link above.

  • Mike_G JotForm Support
    Replied on January 31, 2016 at 12:52 PM

    I have checked both forms and I can say that they are almost identical when it comes to their contents. 

    So, if you don't mind having a different the Form ID for your form (https://form.jotform.com/60038432878157)that you would like to be exactly the same as the other one(https://form.jotform.com/60046541086148), you can just clone the other form and just apply some minor changes in the clone version of the form's content. Here's a guide on how you can clone a form from using URL(https://form.jotform.com/60046541086148): How-to-Clone-an-Existing-Form-from-a-URL

    Please be reminded that when you clone a form, it will create a new form with a new form ID that is exactly as the one you have cloned.

    Let us know if that suggestion will work for you.

  • minemetitiri
    Replied on February 1, 2016 at 10:21 AM

    Yes, the forms are alike, yet they are not. The changes made in the other were made by someone else who has rights to change. If I clone the other to the be used as this one, then I will have to figure out where are the differences are and this is urgent and I wont have the time to redo edits.  I just need the form to be uniform in the size of the texts boxes and fonts as the example I gave in my previous response. All input  fields showing as they should in normal sized 12 pt font. The width of the date, address, and sub labels on one line and within the frame of the application form. 

    Cloning is an easy way out which does not solve my problem rather it creates new ones. I just need to figure out how to fix what was done to the form in the pic below.

    These are the specific problems I am having with this form:

    https://form.jotform.com/60038432878157 

    Here are photos of the things I am trying to fix. 

     

     

     

     

    Sub label field, date field, and address field too long, running off page Image 1 Screenshot 50

    Sub label field, date field, and address field too long, running off page Image 2 Screenshot 61

    Sub label field, date field, and address field too long, running off page Image 3 Screenshot 72

    Sub label field, date field, and address field too long, running off page Image 4 Screenshot 83

  • David JotForm Support
    Replied on February 1, 2016 at 12:24 PM

    I copied the CSS from the form with the proper layout to your version of the form and it looks to have fixed most of the issues.  Here is your version with the changes made:

    https://form.jotform.com/60315421530946

    You can clone that form to your account to have an updated version:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • minemetitiri
    Replied on February 1, 2016 at 4:06 PM

    Thank you David!!

    It worked and I was able to figure out the wrap text issue with another CSS line I injected. Its back to what it should be. I appreciate your help.

  • David JotForm Support
    Replied on February 1, 2016 at 5:20 PM

    You are very welcome, happy to help.  If there is anything else we can assist you with, just let us know.

  • minemetitiri
    Replied on February 1, 2016 at 5:34 PM

    There is, but I posted it in another thread. My drop down selections don't show when I select options. Its the only issue I have left. Considering where I started this seems so silly. 

    I am going to see if it has to do with the font size in the DD boxes.

     

    Thanks again David.

     

  • David JotForm Support
    Replied on February 1, 2016 at 6:52 PM

    If you add this code, it should allow for the contents of your dropdowns to show when selected:

    .form-dropdown {
        min-height : 40px;
    }

    The font looks to be a little to large to fit within the boxes.

  • minemetitiri
    Replied on February 1, 2016 at 7:43 PM

    Hi David, I tried the injection and I decreased the font. Its still not visible.

    I also messed around the width and height of the box and still nothing.

    Additional thoughts?

     

    Sub label field, date field, and address field too long, running off page Image 1 Screenshot 20

  • Charlie
    Replied on February 2, 2016 at 1:16 AM

    This is most probably because of the padding set to your drop down.

    It is set to 10px, I tried 0px and the selected option now shows properly.

    Sub label field, date field, and address field too long, running off page Image 1 Screenshot 20

     

    Here's my CSS code:

    .form-dropdown {

        padding : 0px !important;

        font-size : 12.5px !important;

        min-width: 100px !important;

    }

    Here's my cloned test form: https://form.jotform.com/60320483210945. I have also set a minimum width so that the options selected displays more completely.

    Let us know if that works.

  • minemetitiri
    Replied on February 12, 2016 at 10:04 AM

    Thank you. That helped.