What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Add Grid Lines & Borders To Configurable List Widget

    Asked by martinbond on February 13, 2015 at 08:24 AM
    can you add grid lines & borders to the configurable list?
  • Profile Image
    JotForm Support

    Answered by Charlie on February 13, 2015 at 10:10 AM

    Hi,

    Upon checking the previous thread that you have, I see that you are hiding and adding new contents to the table data on column 1. You could try adding this code to add a border effect:

    table {

    border-spacing: 3px !important;

    }

    td {

    border: 3px solid red;

    }

    You could change the values depending on your preferences.

    Kind regards

  • Profile Image

    Answered by martinbond on February 13, 2015 at 10:54 AM

    Thank you, is it possible to add specific colour codes? 

  • Profile Image

    Answered by martinbond on February 13, 2015 at 11:05 AM

    Also, how can you add a border around the title block area. See snip below, code doesn't seem to be fully functioning.

    Ideally i'd have a border around the area of the whole Widget including title & column names. Then just horizontally between each column separation. Is this possible?  

  • Profile Image
    JotForm Support

    Answered by Charlie on February 13, 2015 at 12:26 PM

    Hi,

    Here's an edited CSS code that might be simpler for you, this also involves the alignment of the static text that was first discuss, you'll need to replace all the CSS codes in the widget.

    .col1, col2, col3, col4 {

    margin: 3px 0;

    min-width: 150px;

    height: 50px;

    font size: large;

    }

    textarea {

    height: 50px !important;

    width: 200px !important;

    font-size: large;

    }

    th {

    font-size : 17px;

    }

    tr {

    font-family: arial;

    font-size: large;

    }

    .col4 input[type="text"] {

    font-size : large

    }

    select {

    height: 30px !important;

    }

    table {

    border-spacing: 2px !important;

    border-collapse: collapse;

    }

    tr:nth-child(2) > td.col1 > span:before {

    content: "Initial Contract";

    }

    tr:nth-child(3) > td.col1 > span:before {

    content: "Option 1";

    }

    tr:nth-child(4) > td.col1 > span:before {

    content: "Option 2";

    }

    tr:nth-child(5) > td.col1 > span:before {

    content: "Option 3";

    }

    #customFieldFrame_249 {

    padding-right: 20px !important;

    margin-right: 20px !important;

    }

    tr td {

    border-bottom: 4px solid #DC1F24 !important;

    }

    th {

    border: 4px solid #DC1F24;

    }

     

    Here's the cloned form that I edited: http://form.jotformpro.com/form/50433479070958 

    Unfortunately the snip that you attached did not show, so I made assumptions on how you would like the grid and borders to show based from what you stated.

    I hope this is correct. Do let me know if this works.

    Thank you.

  • Profile Image

    Answered by martinbond on February 14, 2015 at 12:34 PM

    Hi, 

    before going any further, I know I keep saying it but, this is the best customer service I've ever received online & your detailed responses are very much appreciated. 

     

    My mistake, I meant to say Vertical line, see very armature snip below of how I want the grid lines to be styled. All in black is what I want, blue lines = remove existing red lines.

    If you could alter the above code to suit that would be excellent. 

     

    Thank you in advance. 

     

     


     

  • Profile Image

    Answered by Shadae on February 14, 2015 at 06:23 PM

    Hi martinbond,

    We are happy to assist you and we truly appreciate your positive feedback and we will continue to assist to the best of our ability.

    Unfortunately, we were not able to see the attachment provided. We are only able to see screenshot attachments on the forum.

    If you were trying to provide a screenshot attachment, could you try to provide us with it once again.

    Please see how to add to screenshots to your post: https://www.jotform.com/answers/277033 

    Thank you.

  • Profile Image

    Answered by martinbond on February 14, 2015 at 11:03 PM

     

  • Profile Image

    Answered by martinbond on February 14, 2015 at 11:09 PM

    Hi please confirm if you can see the above screen shot, Can you also highlight which part of the code related to the vertical lines. If I don't like how they appear I can just remove this line of code. 

     

  • Profile Image
    JotForm Support

    Answered by Welvin on February 15, 2015 at 03:14 AM

    Yes, we have received your screenshot and thanks for the outline.

    How about this: http://form.jotformpro.com/form/50451822599966? ?

    Thanks

  • Profile Image

    Answered by martinbond on February 15, 2015 at 03:23 AM

    This looks great, only thing now is can you Vertically center all fields (text boxes, drop downs etc) so they sit in the middle of their respective border. Obviously I want the existing code to remain that horizontally aligns the fields to the border out line.  

  • Profile Image

    Answered by martinbond on February 15, 2015 at 03:30 AM

    as per heading fields. 

  • Profile Image
    JotForm Support

    Answered by Welvin on February 15, 2015 at 04:37 AM

    Done! Kindly check again: http://www.jotformpro.com/form/50451822599966. Let me know if this is perfect so I can give you the overall changes in the codes.

    Thanks

  • Profile Image

    Answered by martinbond on February 15, 2015 at 06:31 AM

    Yes this is perfect, I assume I'll have the ability to change color codes of border lines? 

  • Profile Image
    JotForm Support

    Answered by Welvin on February 15, 2015 at 06:48 AM

    Yes, that is correct. You can always change the color if you need to.

    The overall custom CSS codes in the widget: http://pastiebin.com/54e086a4808d4. At bottom, you will find the following changes:

    th {

    border: 2px solid #000000;

    padding: 5px;

    }

    tr td {

    border-bottom: 2px solid #0047FF !important;

    border-left: 2px solid #000;

    }

    td {

    vertical-align: middle;

    }

    You have to run the widget configuration and check it in the widget custom CSS area:

     

    For the Label borders, the custom CSS are injected at the general CSS area of the form:

    label#label_249 {

    border-top: 2px solid #000;

    border-right: 2px solid #000;

    border-left: 2px solid #000;

    margin-bottom: 0px;

    margin-left: 0px;

    margin-right: 38px;

    }

    Here's how you can check it: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. At the bottom part.

    Let us know if you have any questions.

    Thanks

  • Profile Image

    Answered by martinbond on February 15, 2015 at 12:49 PM

    Hi, there seems to be an error in the code, it's replicating the first child text in every column. see screenshot. 

  • Profile Image

    Answered by Shadae on February 15, 2015 at 01:30 PM

    Hi martinbond,

    I do apologize for the issue that you are experiencing.

    After reviewing your form, the issue is being caused by your "Field Configuration" you have placed "Initial Contract" for that column as such it appears in all rows. That should be left blank as shown in the screenshot:

    Please inform us if you need further assistance.

    Thank you.

  • Profile Image

    Answered by martinbond on February 15, 2015 at 01:46 PM

    Perfect. Thank you. This is really pushing it but is there any way to have the following code at the start, reason being this is the info I'll be changing on my other widgets, so it will save me / future users who, believe it or not, are less competent with coding than myself, from editing any other the other styling code as they will not have to scroll down past it.  

  • Profile Image

    Answered by martinbond on February 15, 2015 at 01:49 PM

    tr:nth-child(2) > td.col1 > span:before {

    content: "Initial Contract";

    }

     

    tr:nth-child(3) > td.col1 > span:before {

    content: "Option 1";

    }

     

    tr:nth-child(4) > td.col1 > span:before {

    content: "Option 2";

    }

     

    tr:nth-child(5) > td.col1 > span:before {

    content: "Option 3";

    }

     

  • Profile Image

    Answered by Shadae on February 15, 2015 at 01:52 PM

    Hi martinbond, 

    I do apologize but we are not able to move this information to the top of the post.

    Thank you for posting the code in its own post and persons will be able to differentiate the information.

    Thank you.

  • Profile Image

    Answered by martinbond on February 15, 2015 at 01:57 PM

    No I didn't mean within this thread, I meant within the actual code itself when injecting CCS in the widget. i.e move it above:

    .col1, col2, col3, col4 {

    margin: 3px 0;

    min-width: 150px;

    height: 50px;

    font size: large;

     

    }

     

    I tried to simply c+p it but it took the text out of the fields. 

     

    Please advise if this is possible & apologies for not being clear. 

  • Profile Image

    Answered by Shadae on February 15, 2015 at 02:54 PM

    Hi martinbond, 

    I do apologize for the misunderstanding.

    Yes you can move the CSS Code for it to appear to in any order. As long as each element is completed there will be issue in your desired effected.

    Please inform us if you need further assistance.

  • Profile Image

    Answered by martinbond on February 15, 2015 at 03:11 PM

    Yes but when I move it to the start of the code it takes out the "Initial Contract" text but keeps option 1, 2 & 3. please advise why this is.

     

  • Profile Image

    Answered by Shadae on February 15, 2015 at 04:04 PM

    Hi martinbond,

    I am currently seeing where all four options are being shown on your widget. I also made the change to my clone version of the form: http://form.jotformpro.com/form/50455793878977 

    Please inform us if you are still experiencing an issue.

    Thank you.

     

     

  • Profile Image

    Answered by martinbond on February 15, 2015 at 10:42 PM

    sorted, thank you for sticking with me on this one. 

  • Profile Image
    JotForm Support

    Answered by Welvin on February 16, 2015 at 02:55 AM

    That's great to know and we're glad that we could help! Should you need any further assistance, please don't hesitate to contact us again.

    Thanks for using Jotform!

  • Profile Image

    Answered by martinbond on February 17, 2015 at 11:45 AM

    Hi,

    Further to above, is it possible to have the rows in alternating colors? 

  • Profile Image
    JotForm Support

    Answered by Charlie on February 17, 2015 at 12:18 PM

    Hi,

    Yes that is possible, you can try adding this code to your existing one:

    tr:nth-child(1) {

    background-color: red;

    }

    tr:nth-child(2) {

    background-color: blue;

    }

    tr:nth-child(3) {

    background-color: yellow;

    }

    tr:nth-child(4) {

    background-color: pink;

    }

    tr:nth-child(5) {

    background-color: white;

    }

    You can see how it looks like here: http://form.jotformpro.com/form/50475034460954. You can change the color depending on what you like.

    Do let us know if you need more information on this.

    Thank you.

  • Profile Image

    Answered by cmt_admin on September 06, 2016 at 09:18 PM

    Hi,  

    I found this code in  another similar discussion. Its more dynamic and easier to use.

    #list tr td {

        padding-top: 20px;

    }

    #list tr:nth-child(odd) {

        background-color: lightblue;

    }

    #list tr:nth-child(even) {

        background-color: lightyellow;

    }