column spacing

  • Profile Image
    lshad24
    Asked on October 26, 2011 at 06:21 PM

    I followed the forum help to try to fix my spacing issues; however, they still remain.  The first image shows what it looks in the Jotform editor.  The bottom image shows what it looks like in the browser.  This is the CSS I injected:

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

    How do I get the columns spaced out wider? I have plenty of room in my form to accomodate this.

  • Profile Image
    NeilVicente
    Answered on October 26, 2011 at 07:08 PM

    Your form's custom css code does not have an !important declaration:

    .form-checkbox-item {width: 180px;}

    Kindly double check your css codes and type in the !important declaration on each code that does not work as intended.

  • Profile Image
    lshad24
    Answered on October 27, 2011 at 10:39 AM
    It did. But I took it out because it seemed to make no difference.



  • Profile Image
    fxr
    Answered on October 27, 2011 at 12:59 PM

    Hello Ishad24,

    We are going to have to have a look at the specifc form you are using to work out what we can do help.

    I have marked the thread as private, so only JotForm support can see it.

     

    If we do clone any of your forms during the process. We will be sure to delete them when done. 

  • Profile Image
    lshad24
    Answered on October 27, 2011 at 02:55 PM

    I am using this custom CSS in my form and it works great - thanks to all who helped!

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

     

    my issue is now I added a "terms and conditions" type field at the end of my form and I need it to expand to be a single line.  Is there a specific CSS inject I need to do to accomplish this without breaking everything else?  I tried to follow other suggestions you gave in the forum, but it isn't working for my form. 

  • Profile Image
    fxr
    Answered on October 27, 2011 at 03:08 PM

    I am not sure what type of field your 'terms and conditions' field is, but try an identify the ID in your forms' source code, itll be near the 'terms and conditions' text and be in a tag, eg id="field_id" and then try something like #field_id { width:100% !important;}

    where field_id is the id of that particular field.

     

  • Profile Image
    lshad24
    Answered on October 27, 2011 at 03:24 PM

    I added the CSS you suggested but it made no difference.  The terms and conditions is a single checkbox field.  This is the CSS so far for this:

     

    #id_29{width:100% !important;}

    #label_29 {
    visibility:hidden;
    }
    #id_29 span {
    visibility:visible;
    }
    #cid_29 label {
    display:none;
    }

    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-error-message {
    display:none;
    }
    .form-error-arrow-inner {
    display:none;
    }

  • Profile Image
    fxr
    Answered on October 27, 2011 at 03:37 PM

    Its very hard to work on a possible solution without the form ID.

    Is it the label of a checkbox field that you are trying to widen?

  • Profile Image
    lshad24
    Answered on October 27, 2011 at 03:42 PM

    To make it easier to see, this is the form http://www.jotform.com/form/12992953156

    I added width=100% to thistag instead and it now displays in one line. 

    #id_29 span {
    visibility:visible;
    width:100% !important;

     }

     

    Can you help me figure out how to get the asterisk closer to the checkbox?

  • Profile Image
    fxr
    Answered on October 27, 2011 at 04:18 PM

    Just add a rule specific to that checkbox, you have pulled it out of (usual) alignment with earlier custom css on the checkbox class:

     

    #input_29_0 {margin-left: -60px !important; } 

    Seems to work. 

  • Profile Image
    lshad24
    Answered on October 28, 2011 at 10:25 AM

    I have tried what you suggested and it brought the asterisk closer.  But somehow something else broke.  After searching through the forums yet again, I found a solution that worked for me!  Thanks for yur help.

    /*spacing checkboxes*/

    .form-checkbox-item { width: 200px !important;}#id_29 {margin-left:60px;}
    #label_29 { display:none; }
    #id_29.form-checkbox-item { width: 200px !important;}
    #id_29 .form-checkbox-item label {position:absolute;top:20;left:22px;
    width:520px;}