How-to-change-column-width-of-a-specific check-box-field

  • Profile Image
    amitchell
    Asked on January 10, 2016 at 06:30 PM

    Similar question as http://www.jotform.com/answers/164954-How-to-change-column-width-of-a-check-box-field

    I have already injected CSS to change the width of all the checkbox fields, however I want to change just one specific checkbox field to different column widths

    The field name is called '{studentsAre}' (Page 4)

     

    Are you able to give me the code to do this?

     

     

  • Profile Image
    beril
    Answered on January 11, 2016 at 04:00 AM

    You can change width of specific field easily. However I couldn't find '{studentsAre}' field an Page 4.

    However, I will show you how to change width of specific field.

    Here is how to do this:

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image
    amitchell
    Answered on January 11, 2016 at 07:22 AM

    I have tried adding the CSS code however it seems to of changed all the checkbox fields

    Page 3, q4a and q7a has some of the fields I need to change.

    Page 6 has the fields I do not want to change

    All I need is to change a couple of them.

    Please note I already have CSS code that changes all checkboxes.  could this be causing a conflict


    .form-checkbox-item {
    width: 80px !important;
    }

    The CSS code I tried to put in is

    #4aIf {
    width: 100px !important;

  • Profile Image
    beril
    Answered on January 11, 2016 at 09:50 AM

    I've checked your CSS code of your form. I see that there is an error on your CSS code. To solve this, you need to add } on line 8 as you see below:

    At that time, it will work properly.

    I have tried adding the CSS code however it seems to of changed all the checkbox fields

    Page 3, q4a and q7a has some of the fields I need to change.

     

    You need to double click to the field that you want to change the width of field.

     

    I will show you with gif. Please check the example.

    If you provide us name of the labels instead of #4aIf we can assist more properly.

    I look forward to hearing from you soon.