I need some help with CSS please

  • Profile Image
    annefarley
    Asked on December 13, 2017 at 11:33 PM

    Hi 


    I have a form

    https://form.jotform.co/72989104579876

    I want the GL Account section to look more like a table without the spaces between the columns. 

    I've tried to do the CSS but I'm having no luck.

    Can someone help please

    What command should i be using - boarder, line height??? I've tried a lot and can't get the result.  Help!!!


    1513226011Snip.PNG

  • Profile Image
    Jim_R
    Answered on December 14, 2017 at 03:18 AM

    You specifically mentioned the GL Account section. Are you hoping to move the adjacent fields beside that column as indicated by the lines shown below?

    Is the aim make them appear closer? We can certainly help you with the CSS codes you need but first, we need to understand what you want to happen. Just get back to us with a bit more info and a clearer description of what you're trying to do so we can better assist you.

    Showing a screenshot of it would also be helpful. Please refer to the quick guide below to ensure that your screenshot will reach our Support Forum. It will never post if you attach it via email.

    Related guide: How-to-Post-Screenshots-to-Our-Support-Forum

  • Profile Image
    Anne Farley
    Answered on December 14, 2017 at 05:28 PM

    1513290471screen shot capture.PNG

    I'm trying to make the area look like a table similar to how I've mocked up in Excel

  • Profile Image
    Jim_R
    Answered on December 14, 2017 at 06:52 PM

    Hmm, why not use the INPUT TABLE field instead?

    You don't seem to be using the fields under those pseudo columns as part of a calculation so using the INPUT TABLE would mean you will just re-create the table and it will appear as a native table on your form.

    And if by any chance you wanted to perform calculations in it, it's also doable.

    Related guides:

    Calculate-Values-in-the-Input-Table-Through-Condition

    How-to-Perform-Form-Calculation-in-the-Matrix-Field 

  • Profile Image
    Anne Farley
    Answered on December 18, 2017 at 10:05 PM

    The submission results for the input table isn't what I'm looking for.  Are you able to help with the CSS please.

  • Profile Image
    Jim_R
    Answered on December 19, 2017 at 01:34 AM

    This is the closest it can get to emulate a table-like structure:

    If that's okay with you, this can be achieved by following these 2 steps:

    1. Set all the left-most shrank fields to MOVE TO A NEW LINE.

    2. Then, here are the CSS codes you need to inject on your Form Builder to get that layout:

    #id_134, #id_136, #id_140, #id_144, #id_148, #id_100, #id_135, #id_139, #id_143, #id_147, #id_97, #id_137, #id_141, #id_145, #id_149 {

        margin-right: -70px;

    }

    #id_100, #id_134, #id_97, #id_116, #id_135, #id_136, #id_137, #id_138, #id_139, #id_140, #id_141, #id_142, #id_143, #id_144, #id_145, #id_146 {

        margin-bottom: -40px;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    This isn't ideal but would meet your requirements of using these separate fields as opposed to using the INPUT TABLE field.