Can someone help me with CSS and why it's not working properly

  • Profile Image
    tnorth
    Asked on July 28, 2015 at 07:30 AM

    Hi I have an issue with my column width... it was working but then I tried to change the height of the fields by adding the line: height: 15px; and now the widths are incorrect and not working properly! Please help (see screenshot) 

    I would also like the headings to be smaller (but only the subheadings) and am not sure how to do this: as you can see I am trying to make the checkboxes closer together without any of these unwanted side-effects!

    Thank you

  • Profile Image
    tnorth
    Answered on July 28, 2015 at 07:31 AM

    This is the CSS i am using: 

     

     

    .form-header-group {

     

    }

     

    .form-line.form-line-column {

        width : 50%;

        height: 20px;

    }

     

  • Profile Image
    tnorth
    Answered on July 28, 2015 at 08:47 AM

    I have sorted out the width problem, however, I am trying to make the CHECKBOXES and SPINNERS closer together but NOT the RADIO BUTTONS on the second page. How can I do this? is it 

    .form-line.form-line-column {

        height: 15px;

    }

    But when i apply this code the widths do not stay and it becomes rows again. 

    PLEASE HELP!! 

    Thank you!

  • Profile Image
    Boris
    Answered on July 28, 2015 at 01:11 PM

    For getting the check-boxes to be vertically closer, you will have to remove the top and bottom padding, as well as margins from these fields.

    I have cloned your form into my account and replaced your existing custom CSS with this:

    .form-line.form-line-column {
    width : 38%;
    }
    .form-line[data-type="control_checkbox"],

    .form-line[data-type="control_checkbox"] + .form-line[data-type="control_spinner"]
    {
        width: 41% !important;
        padding: 0 3% 0 6% !important;
        margin: 0 !important;
    }

    This is how the form displays for me now:

    By sub-heading, do you mean the text that says "Build Your Quote" and "Rental Choices"? If so, we can style these elements with the following CSS:

    h2.form-header {
        line-height: 1.2em;
        font-size: 1.4em;
    }

    You can change the font size to any particular size that you want. If you wish to reduce the vertical space above and below the sub-headers, you can do so by adding the following code:

    .form-header-group {
        padding: 0px;
    }

    Here is a cloned form with all of the above codes applied, so you can check these solutions in action:

    http://form.jotformpro.com/form/52084782295968

    Please let us know if you need any further assistance, and we will be happy to help.

  • Profile Image
    tnorth
    Answered on July 29, 2015 at 05:54 AM

    Sounds great - by headings I meant the 'Additional Telephone Services' and 'Additional Unified Comms Services' etc, how would i make these vertically narrower? One problem with the code you have given I have noticed: the rentals section (Page 3 of the form) has become misaligned, how could i change this back? 

    Thanks again!

  • Profile Image
    Boris
    Answered on July 29, 2015 at 06:14 AM

    You can reduce the top and bottom padding, as well as margins, for all Text elements on your form by using the following CSS:

    li[data-type="control_text"],
    .form-html, .form-html > p {
      padding-top: 0;
      padding-bottom: 0;
      margin: 0;
    }

    Please let us know how it goes.

  • Profile Image
    tnorth
    Answered on July 29, 2015 at 06:59 AM

    Sorry i edited the post and i think you missed it: the code has caused the Rental section to become misaligned so I tried adding in the original width: 50% and now the quantities have fallen underneath! How can i resolve all these issues !

    Thank you

  • Profile Image
    tnorth
    Answered on July 29, 2015 at 07:01 AM

    Dont worry! Problem Solved