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

    Help with vertical alignment of Text Box and Check Box

    Asked by KennedyPTA on August 12, 2013 at 01:16 AM

    Hi JotFormers!

    I'm experienced with CSS but new to JotForm.  Having problems with side-by-side alignment and excessive padding and margin space around the form items.  

    Here's the form-in-progress URL : http://form.jotform.us/form/32222030639140

    This form collects member contact info.  Our paper forms give members the ability to suppress parts of their contact info as they see fit (show/hide address, show e-mail instead of phone, etc.).  So, I capture the info in a text box and want to have a checkbox by it's side so it's clear what they are showing/hiding.  

    When I build the form it looks only slightly misaligned (check box is lower).  But when I preview, it's totally off alignment - looks like the text box is top-aligned in it's box and check box is probably bottom-aligned.  With many fields like this, the form is unusable.

     

    I can't figure out the CSS to correct this problem, or even how to refer to the checkbox fields.  If I look in the field properties, the id property looks like "#input_39_0," which sometimes affects only the checkbox part of the field (not the text label). What's the fix here?

    While I'm asking, I'd also like to kill off as much margin and padding on the form items as possible.  I have injected a generic 0px margin and padding, but this doesn't seem to affect many of the items.  At the end of the form that I reference there's a set of checkbox fields (this is from a different form).  I need them to be separate fields rather than a single check box control because the single control reports the results in an unusuable fashion (concat of all selected items which I would then have to parse).  But I can't get the individual check box items very close together.  

    Thanks O Wizards!

    David Fung

    Page URL:
    http://form.jotform.us/form/32222030639140

    alignment check Reports JotForm checkbox problem style
  • Profile Image

    Answered by pinoytech on August 12, 2013 at 09:56 AM

    Hi David,

    I've clone your form and made some workaround on it for you to check if I did it correctly.

    http://www.jotformpro.com/form/32233459864965

    If yes, inject this custom css into your form.

    #label_34, #label_35, #label_39, #label_40, #label_42, #label_45, #label_51, #label_17, #label_18, #label_19, #label_20, #label_21, #label_22, #label_23, #label_24, #label_25, #label_26, #label_27, #label_28, #label_29.form-label-top {

    display: none !important;

    }

    .form-checkbox-item {

    margin-top: 6px;

    margin-bottom: 6px;

    }

    #id_45 {

    margin-left: 70px !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by KennedyPTA on August 12, 2013 at 04:44 PM

    Pinoytech - 

    Thanks for the prompt solution!  I saw it in my mailbox first thing this morning, but wanted to understand what you did before I responded.  

    It looks like the key thing upsetting my layout was the (juat a  ) label field associated with each field, and which you are removing from the layout with display:none.  Given the responses that was wading through before writing in I think that a FAQ article about display:none on "empty" fields would probably save a lot of headaches for your users. 

    This css was also applied to the list of items on my second page, but didn't pull the checkbox items any closer together (I had bumped them in slightly with a global padding:0 and margin:0).  Is there a good fix that would reduce that white space further?  Would a negative margin-bottom on these items be the best fix?

    Thanks again!  You guys are great!

    David Fung

  • Profile Image

    Answered by pinoytech on August 12, 2013 at 05:11 PM

    Hi David,

    I've updated 2nd page of the clone form to adjust the distance of checkbox. Can you please take a look at it if I did it correctly?

    http://www.jotformpro.com/form/32233459864965

    If yes, inject this custom css into your form.

    #id_15.form-line.form-line-column {

    margin-bottom: 0px !important;

    }

    #id_17, #id_18, #id_19, #id_20, #id_21, #id_22, #id_23, #id_24, #id_25, #id_26, #id_27, #id_28, #id_29.form-line.form-line-column {

    margin-top: 0px !important;

    margin-bottom: 0px !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by KennedyPTA on August 12, 2013 at 10:44 PM

    Thanks, this css gives the desired result on the form that you cloned.  I added the snippet to my copy of the form and the checkbox spacing tightened up in the form builder, preview, and in a tab.

    I do still see a strange problem.  The form that you were working on was cloned from an earlier form I did.  This section with the widely spaced checkboxes is from the original form.  

    So, I moved the css snippet to the other form, which is located here:

        http://www.jotform.com//?formID=32201018197849

    The checkbox item IDs are the same.  The only change to the injected CSS was that I brought #id_15 into the list with the other checkboxes.

    When I make the change in the form builder, the spacing looks tighter on the screen, but when I preview the form, it's back to the wide spacing.  It's also wide if I open the preview in a tab.  What's the problem here?

    I should add that this form that's showing the problem already had some responses (tests from me), so I wasn't sure if your server would allow a live form to be modified.  I deleted the responses, but the problem still shows.

    Many thanks in advance,

    David Fung

  • Profile Image
    JotForm Support

    Answered by jonathan on August 12, 2013 at 11:17 PM

    Hi David,

    I think it will best help if you first review this guides

    1. How-to-find-Field-IDs-Names

    2. How-to-Inject-Custom-CSS-Codes

     

    Inform us if this does not make the difference.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on August 12, 2013 at 11:19 PM

    I am sorry, it seems it still does not work as intended. I just found out.

    Let me check further.

  • Profile Image

    Answered by KennedyPTA on August 12, 2013 at 11:24 PM

    jonathan - 

    Thanks.  I actually was wondering about the syntax, but I had picked that up verbatim from the previous support message.  

    Thanks also very much for the links.  I had found the injection article before.  I think there are some issues with the viewing of field names in properties, but based on pinoytech's snippets, I figured out it was better to pull the IDs from the source listing.  

    Thanks in advance for any help on this issue.  I think it must be an interaction with some other part of the form state to exhibit this odd behavior (looks right in builder, but doesn't render right in preview).

    David Fung

  • Profile Image
    JotForm Support

    Answered by jonathan on August 12, 2013 at 11:30 PM

    Hi David

    Please try it like this

    #cid_15,#cid_17, #cid_18, #cid_19, #cid_20, #cid_21, #cid_22, #cid_23, #cid_24, #cid_25, #cid_26, #cid_27, #cid_28, #cid_29 {

    margin-top: -30px !important;

    margin-bottom: 0px !important;

    }

    I was able to to test it on a form here http://www.jotformpro.com/form/32238477145962

    Test the code on your form.

    Hope it work this time. Inform us if we need further checking on this.

    Thanks.

  • Profile Image

    Answered by KennedyPTA on August 13, 2013 at 12:49 AM

    jonathan - 

    Thanks for your response.  

    The results I got were a bit mixed.  On one hand, I can precisely control the spacing of the checkboxes, so this is a workable solution (adjustments to the margins were what I expected the solution to be).

    But, after I make this change in the form builder, the checkbox items are all overlapped, then appear with reasonable spacing in the preview.  This is sort of the same problem I was having before, where the spacing looked right in the form builder but was too large in the browser.  Although I'm getting a usable result, I'd like to fix the real problem - it's very hard to edit the checkbox list when the items overlap, and I worry that this will manifest differently in different browsers.

    Whatever is happening wrong here is something different than the original form that I submitted.  There, the "margin-top:0 !important; margin-bottom:0 !important;" had correct fidelity between the form builder and preview.

    If this warrants a deeper look, I would be greatly appreciative.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on August 13, 2013 at 03:22 AM

    Hi,

    I am sorry, but I am not able to fully understand which part is hard to edit...

    When I am on my form builder, I can edit the checkboxes options with ease and they do not appear overlapping with each other.

     

    It would help if you can provide us a screenshot or visual where we can check the overlapping view on your end. 

    Thanks.

     

  • Profile Image

    Answered by KennedyPTA on August 13, 2013 at 03:54 AM

    jonathan - Thanks for continuing to look into this.

    Here's what the compressed display in the Form Builder looks like:

     

    I have set margin-top:-20 !important; here, a little less condensed than your snippet.

    Here's how that same file looks in Preview:

    Which looks pretty normal.

    I see this same appearance in Chrome and Firefox on Windows and Chrome on Mac as well.

    The set of checkboxes we're manipulating here are each separate items, rather than one item with many options.  Each checkbox has only one option.  The reason I'm doing this is that it's better when I'm getting the responses - with separate checkbox items, each response shows up in a different column; if you do this as one checkbox with many options, then all the responses are concatenated in a single field which is harder to post process.

    The weird thing here is that pinotech's version has the same appearance in Form Builder and Preview.

    Thanks,

    David Fung

  • Profile Image
    JotForm Support

    Answered by jonathan on August 13, 2013 at 04:49 AM

    Hi David,

    I was able to see the overlapping issue base on your screenshot. But I could not reproduce this yet on my end.

    Can you please try using any other browser aside from the one you currently used that have this issue. See if the display in the form builder is much better.

    OR

    You can also try cloning my test form http://www.jotformpro.com/form/32238477145962

    Use this guide to clone How-to-clone-an-existing-form-from-a-URL 

    Check if the cloned version will still have the overlapping look when in your form builder.

    Hope this help. Please inform us if the issue persist.

    Thanks.

  • Profile Image

    Answered by KennedyPTA on August 13, 2013 at 10:12 AM

    jonathan - 

    Thanks again for your help.  I had tried my form on multiple browsers (Chrome and Firefox, Windows 7 and OS X Mountain Lion) all showing the same problem.

    But I did clone your file and it does seem to display correctly.  I will compare them in greater depth later today, but I may just redirect to the form I cloned from you and call it a day.

    Thanks for all your help!

    David Fung

  • Profile Image

    Answered by jeanettebmz on August 13, 2013 at 02:01 PM

    Mr. Fung

    I am very pleased seeing your issue has been sorted out. We will await for your results. Hopefully you'll be all set with Jonathan's workaround

    Do not hesitate to contact us if further help is needed.