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

  • pardop1
    Asked on April 10, 2016 at 4: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

  • Kiran Support Team Lead
    Replied on April 10, 2016 at 5:08 PM

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

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

    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.

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

    Hope this information helps! 

  • pardop1
    Replied on April 11, 2016 at 5:45 PM
    this is not working. Please use my team names, not the ones in your grid.
    thanks,
    Pam
    ...
  • Chriistian Jotform Support
    Replied 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.

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

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