How to align uniformly items in form?

  • Profile Image
    AngelesMannies
    Asked on August 03, 2018 at 03:06 AM

    How can I make the items on Candidate Agency Agreement line up and be uniform?


    https://form.jotform.com/81551427984162



    Thank you

  • Profile Image
    daisy
    Answered on August 03, 2018 at 08:52 AM

    To make labels to be uniform please insert css code into your form:

    .form-input {

    display: flex!important;

    }

    .form-label-left,

    .form-label-right,

    .form-label-left.form-label-auto,

    .form-label-right.form-label-auto {

     width: 65px!important;

    }

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes



  • Profile Image
    AngelesMannies
    Answered on August 03, 2018 at 02:43 PM
    Amazing thank you!
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    AngelesMannies
    Answered on August 03, 2018 at 02:43 PM
    When I look at the form on my webpage, s
    ome of the
    lines are cut off, how do I fix this?
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    luisvcsilva
    Answered on August 03, 2018 at 04:00 PM

    You can fix this problem by adding the following CSS code fragment to your form:

    .form-radio-item label {

        overflow : visible;

    }

     

    The screencasts below show the broken version of your form and the fixed version of your form respectively. Notice that the new version rearranges the text according to the device resolution:

    1533326404GIFrecord_03-08-2018-_165516.g

    1533326367GIFrecord_03-08-2018-_165437.g 

     

    You can clone a fixed version of your form here:

    https://form.jotform.com/82145852920962

     

    Contact us if you need any assistance,

    Thanks.

     

    Related Guides:

    https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

  • Profile Image
    AngelesMannies
    Answered on August 03, 2018 at 04:43 PM
    I added the CSS code here and it didn't help...
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    daisy
    Answered on August 03, 2018 at 05:03 PM

    Please try the CSS code:

    .form-input {

    display: table-cell!important;

    }

  • Profile Image
    AngelesMannies
    Answered on August 04, 2018 at 07:43 PM
    I tried that. Do I put this code immediately below the other code I have in
    there?
    Thank you.
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    Mike_G
    Answered on August 04, 2018 at 10:14 PM

    Yes, it should be below the other CSS codes you injected in your form.

    If you need any further assistance, please feel free to let us know and give us more details. Also, may we ask for the website where you embedded your form, please?

  • Profile Image
    AngelesMannies
    Answered on August 05, 2018 at 12:43 PM
    https://www.angelesmannies.com/candidate-agency-agreement/
    I've added the code and it still looks the same on the site, please
    helllllllp!
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    Mike_G
    Answered on August 05, 2018 at 03:10 PM

    Thank you for updating us. Can you please try injecting the CSS codes below to your form after you have removed the other custom CSS codes that were previously injected?

    li:nth-child(n+2):nth-child(-n+14) .form-label {

        width: 2% !important;

        padding-right: 10px !important;

    }

    li:nth-child(n+2):nth-child(-n+14) .form-input.jf-required {

        width: 97% !important;

        display: table-cell !important;

    }

    @media (max-width: 1000px) {

      .form-all {

        width: 100% !important;

      }

    }

    @media (max-width: 860px) {

    .header-logo {

        display: block !important;

        text-align: center !important;

    }

    .header-text.httac.htvam {

        display: inline !important;

    }

    img.header-logo-left {

        max-width: 100%;

    }

    }

    1533496121t15_07_41.png

    Here's a clone version of your form where I have applied the changes above — https://form.jotform.com/82165906535966

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
    AngelesMannies
    Answered on August 08, 2018 at 02:43 AM
    Better!!
    Since you're working your magic, is there a way to make the text in line
    and not overlap to radio button? Thank you,
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    daisy
    Answered on August 08, 2018 at 04:17 AM

    The texts don't seem to overlap the radio buttons when I checked your form in your website and in your account:

    1533716040responsive.gif

    Do you want to change the text alignment for not being aligned with radio buttons:

    1533716151Screen Shot 2018-08-08 at 11.1

  • Profile Image
    AngelesMannies
    Answered on August 08, 2018 at 01:43 PM
    Yes if there was a way to do that it would be great!
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    Mike_G
    Answered on August 08, 2018 at 02:53 PM

    Please try injecting the CSS codes below to your form.

    li:nth-child(n+2):nth-child(-n+14) .form-radio-item label {

        left: 24px !important;

        position: relative !important;

        margin-left: -16px !important;

    }

    If you have other questions, please do not hesitate to let us know.

  • Profile Image
    AngelesMannies
    Answered on August 10, 2018 at 01:43 AM
    Great thanks!
    Regards,
    *Placement Specialist*
    t: +1(818) 839- <(323)%20963-4046>0 <(323)%20963-4046>*362*
    jobs@angelesmannies.com




    * AngelesMannies.com *
    THIS EMAIL IS INTENDED ONLY FOR THE USE OF THE INDIVIDUAL OR COMPANY IT IS
    ADDRESSED AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED AND/OR
    CONFIDENTIAL. IF THE READER OF THIS MESSAGE IS NOT THE INTENDED RECIPIENT,
    YOU ARE HEREBY NOTIFIED THAT ANY DISSEMINATION, DISTRIBUTION OR COPYING OF
    THIS COMMUNICATION IS STRICTLY PROHIBITED.
    BY COMMUNICATING WITH ANGELES MANNIES VIA EMAIL, YOU AGREE TO RECEIVING
    EMAILS FROM TIME TO TIME ABOUT UPCOMING PROMOTIONS AND NEWSLETTERS. IF YOU
    DO NOT WISH TO RECEIVE SUCH COMMUNICATIONS, PLEASE UNSUBSCRIBE HERE
    .
    ...
  • Profile Image
    daisy
    Answered on August 10, 2018 at 02:53 AM

    Thank you for using JotForm.

    We will happy to help you if you need further assistance.