CSS coding for multiple checkboxes

  • Profile Image
    MelissaH
    Asked on February 11, 2014 at 06:55 PM

    I want to be able to export multiple selections under one question into individual cells in excel 2010. In order to do that I understand I have to create seperate check boxes with no label. That creates a formatting issue. Below is my source code. I know basic css and html but can't figure this out or find any other resource on teh web to help me. Anyone know how to code the CSS on this form to line up the check boxes to look like they are under teh same question? The from link is http://form.jotformpro.com/form/40246329693964

    Thank you in advance.

     

    <li class="form-line" id="id_11">
              <label class="form-label-top" id="label_11" for="input_11"Which types of fitness activities/Club services interest you? </label>
              <div id="cid_11" class="form-input-wide">
                <div class="form-multiple-column"><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_11_0" name="q11_whichTypes11[]" value="Personal Training" />
                    <label for="input_11_0"Personal Training </label></span><span class="clearfix"></span>
                </div>
              </div>
            </li>
            <li class="form-line form-line-column" id="id_24">
              <label class="form-label-top" id="label_24" for="input_24">  </label>
              <div id="cid_24" class="form-input-wide">
                <div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_24_0" name="q24_input24[]" value="Pilates" />
                    <label for="input_24_0"Pilates </label></span><span class="clearfix"></span>
                </div>
              </div>
            </li>
            <li class="form-line form-line-column" id="id_25">
              <label class="form-label-top" id="label_25" for="input_25">  </label>
              <div id="cid_25" class="form-input-wide">
                <div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_25_0" name="q25_input25[]" value="Swimming" />
                    <label for="input_25_0"Swimming </label></span><span class="clearfix"></span>
                </div>
              </div>
            </li>

  • Profile Image
    Carina
    Answered on February 11, 2014 at 08:22 PM

    Please insert the following css code:

    #id_24, #id_25, #id_26, #id_27, #id_28, #id_29, #id_30, #id_31, #id_32, #id_33, #id_34, #id_35, #id_36, #id_37, #id_38, #id_39, #id_40

    {

    padding-top:1px;

    padding-bottom:1px;

    padding-left:36px;

    padding-right:6px;

    margin:2px 0;

    width: 145px;

    }

    It still has some space between the options but this way they get aligned. As a suggestion I would make personal training a separated option, not indexed to the question, as this creates a visual separation from the rest of the options.

    Kindly let us know if you need more assistance.

     

  • Profile Image
    MelissaH
    Answered on February 12, 2014 at 11:50 AM
    THANK YOU!!

    ...