Check box fields going on to second line - want them to stay on the same line since there is room.

  • Profile Image
    pardop1
    Asked on April 10, 2016 at 04:37 PM

    I have three columns and there should be enough room for the first box with all of the team names to be on the same line as its box, but some are moving to the next line which looks awful please fix this. the form is:

     

    https://form.jotform.com/60890082200951

     

    Thanks,

     

    Pam

  • Profile Image
    Kiran
    Answered on April 10, 2016 at 05:08 PM

    I believe that you are referring to the field 'What NB sport(s) did this athlete...'. 

    Please add the following CSS code to your code to increase the width of the labels for the checkbox field.

    .form-multiple-column .form-checkbox-item {

    width: 200px;

    }

    It should be displaying as shown below after injecting the code.

    Hope this information helps! 

  • Profile Image
    pardop1
    Answered on April 11, 2016 at 05:45 PM
    this is not working. Please use my team names, not the ones in your grid.
    thanks,
    Pam
    ...
  • Profile Image
    Chriistian
    Answered on April 11, 2016 at 11:37 PM

    It appears that some of the team names are too long for the three columns, which is why they are moving to the next line.

    A possible workaround would be to make the width of the form wider to fit the length of the team names into three columns while maintaining their font size.

    Please inject the css below to resolve the issue:

    .form-all {

        width: 900px;

    }

    .form-multiple-column {

        width: 820px!important;

    }

    span.form-checkbox-item {

        width: 270px!important;

    }

    .form-all:before {

        background-position: top center;

    }

    Here's a demo form where I applied the css: https://form.jotform.com/61018532010943.
    You can also clone it to your account if you like.

    If you need further assistance, please let us know.
    Regards.