2 CHeckbox fileds 2 widths?

  • Profile Image
    bleeckerstreet
    Asked on January 30, 2012 at 02:04 PM

    I have two different checkbox fields and they require different column widths.  I have entered the following:

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

    width: 300px;

    }

    But that sets the field width for the entire form.  Can i have different widths for different feilds?

     

    http://www.jotform.com/form/20294434073

  • Profile Image
    NeilVicente
    Answered on January 30, 2012 at 04:03 PM

    1.  Look at your form's source code (Preview - right click - view source)

    2.  Find the ID of the field (li) that you want to customize

    3.  Prepend that ID with a number sign # then use it with your custom CSS

    For example:

    #id_14 {
    width:300px;
    }

  • Profile Image
    carrion4judge
    Answered on January 30, 2012 at 04:42 PM

    That didnt work

  • Profile Image
    NeilVicente
    Answered on January 30, 2012 at 04:48 PM

    The solution I provided worked on this cloned form - http://www.jotform.com/form/20295357114?

    Notice how the field "I would like to volunteer by" have a different width than the rest of the fields.

  • Profile Image
    carrion4judge
    Answered on January 30, 2012 at 05:00 PM

    Looks like its not working on yours either.  I am refering to the column widths for the check boxes and radio buttons.  The

    #id_14 { width:300px; }

    Only changes the entire field width. I need the spread column widths to be different for the I want to volunteer and I want to make a donation selections
  • Profile Image
    NeilVicente
    Answered on January 30, 2012 at 05:05 PM

    Use this:

    #id_14 .form-checkbox-item {
    width:100px;
    }

    Just change the value of width to suit your needs.

  • Profile Image
    carrion4judge
    Answered on January 30, 2012 at 06:00 PM

    thanks that worked.  Is there a minimum value, i can't seem to get the coumns to go any smaller that what they are even after setting it to like 15px

  • Profile Image
    idarktech
    Answered on January 30, 2012 at 07:24 PM

    Hi,

    Try adding !important on your css code.

    e.g. 

     

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

    width: 15px !important;}

     

    I hope this helps. Please let us know if you need any further assistance. Thank you so much!