Allignment and design related fixes on Form

  • Profile Image
    Benflips
    Asked on July 13, 2016 at 06:32 AM
    1. I put in some suggested code at one point to disable the (unused)
    labels above checkboxes 2-5 under the privacy consent tab...so they 'look'
    like they are all one set of checkboxes.
    It appears that some other change we have applied since then has now
    added extra space between each again, including space between the first
    checkbox and it's label. I'd like this all reduced or compressed please.
    2. For all check-boxes and radio buttons with TOP label alignment, can I
    have the button or checkbox icon left-aligned directly under (or perhaps
    only slightly indented) from the overlying label - currently it looks like
    it is almost a centimetre in and it is too much.
  • Profile Image
    Irshad
    Answered on July 13, 2016 at 10:04 AM

    I am working for the css related fixes, and will update you shortly.

  • Profile Image
    Irshad
    Answered on July 13, 2016 at 10:16 AM

    I am able to see the label above the first check box on Page one. So please confirm, which label you are unable to see. 

    For the other design related changes, you would require to inject the below css code:

    .form-single-column {

        padding-top: 3px!important;

    }

    .form-radio, .form-checkbox {

         margin-left: -10px;

    }

    I have also created the clone form, so please verify the changes on my clone form:

    https://form.jotform.com/61943699208973

    Thanks

  • Profile Image
    Benflips
    Answered on July 13, 2016 at 09:09 PM

    So, I do want to see the first label, and not the 'space' associated with the individual labels for the next four.

    Your clone is almost perfect - I just need the label to be on one line, and not wrapped as it currently is to 3 lines.

    Can you provide altered CSS to create this? Thanks.

    (Alternatively, the reason why I've set this as 5 separate checkbox fields was because one of your colleagues said there was no way to 'require' all of the checkboxes in a SINGLE checkbox control to be filled...but when I go into the normal properties for a checkbox field it has options for both minimimum and maximums that must be selected...doesn't this allow me to select that all checkboxes must be filled to proceed??)

  • Profile Image
    jonathan
    Answered on July 14, 2016 at 02:53 AM

    If I understand correctly, you want this field label to be in one line and use the max width of the form instead.

     

    Try adding this CSS codes on your form.

     

    #label_324 {

    width : 100% important;

    }

     

    the result should be like this.

     

    Hope this help. Let us know if this did not work.

  • Profile Image
    Benflips
    Answered on July 14, 2016 at 03:45 AM
    That is what I want, yes.
    I entered the code in the form CSS and it made no difference - at least not
    in preview.
    Some other change somewhere along the line has made this happen. In the
    past this label has not behaved in this way!
    ...
  • Profile Image
    Irshad
    Answered on July 14, 2016 at 06:38 AM

    Please add the symbol "!" before the word "important". That is the css class should be:

    #label_324 {

    width : 100% !important;

    }

    Please check the screenshot:

    You can also verify it on my Clone form: https://form.jotform.com/61953121211948

    If you face any issue, or need further assistance, please let us know.

    Thanks

  • Profile Image
    Benflips
    Answered on July 14, 2016 at 06:54 AM

    Brilliant, Thank you!

  • Profile Image
    Irshad
    Answered on July 14, 2016 at 08:17 AM

    You are welcome. Please feel free to  revert back, if you have any other query or need further assistance.