Allignment and design related fixes on Form

  • Benflips
    Asked on July 13, 2016 at 6: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.
  • Irshad
    Replied on July 13, 2016 at 10:04 AM

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

  • Irshad
    Replied 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

  • Benflips
    Replied on July 13, 2016 at 9: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??)

  • jonathan
    Replied on July 14, 2016 at 2: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.

    Allignment and design related fixes on Form Image 1 Screenshot 30

     

    Try adding this CSS codes on your form.

     

    #label_324 {

    width : 100% important;

    }

     

    the result should be like this.

    Allignment and design related fixes on Form Image 2 Screenshot 41

     

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

  • Benflips
    Replied on July 14, 2016 at 3: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!
    ...
  • Irshad
    Replied on July 14, 2016 at 6: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:Allignment and design related fixes on Form Image 1 Screenshot 20

    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

  • Benflips
    Replied on July 14, 2016 at 6:54 AM

    Brilliant, Thank you!

  • Irshad
    Replied on July 14, 2016 at 8:17 AM

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