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

    Edit a configurable list.

    Asked by menstrom on May 16, 2016 at 03:58 PM

    Two more questions on editing a configurable list!

    I would like to add a dollar sign before and ".00" after the boxes in one of the columns.  I learned how to do this with other boxes on the form by using the following CSS:

    #cid_1: before {

    content: “$” !important;

    }

     #cid_1: after {

    content: “.00” !important;

    }

    But when I try this in the CSS code for the configurable list, it doesn't work.  Here is the syntax I tried:

    .col3 [type="text"]: before {

    content: “$” !important;

    }

     .col3 [type="text"]: after {

    content: “.00” !important;

    }

     

    Also, I have configured some of my columns in one of my configurable lists to have two radio buttons.  They default to vertical alignment in the column.  Can I change them to be horizontally aligned in the column?

     

    Thanks,

     

    Marilyn

     

    Page URL:
    https://www.jotform.com//?formID=61054701244142#

    configurable list css code content configurable
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 16, 2016 at 06:44 PM

    Here is the CSS code to put the dollar sign before a specific field column: 

    .col3:before {

        content: "$ " !important;

    }

    Result:

    On regards of aligning  the radio buttons horizontally, please try with the following CSS code:

    .radio:nth-child(1){

        margin-left: -20px;

    }

     

    .radio:nth-child(2){

        margin-left: 30px;

        margin-top: -19px;

    }

    Result:

    Here is my cloned version: https://form.jotform.com/61367119930962 

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image

    Answered by menstrom on May 17, 2016 at 12:21 PM

    Is it possible to have the dollar sign in front of the text boxes but not in front of the title at the top of the column?  I would like to put the ".00" after the boxes as well, but that will really look silly if the title of the column says "$ Amount .00".

    Thanks,

    Marilyn

  • Profile Image

    Answered by Ben on May 17, 2016 at 02:21 PM

    To do that you should remove the content before the first row.

    So after adding the code suggested by my colleague, you follow it up with the following:

    tr:first-child .col3::before, tr:first-child .col3::after {
        content: "";
    }

    That sets it up to hide the $ sign.

    In regards to your original code Marilyn, I do wish to mention what went wrong.

    .col3 [type="text"]: before {}

    Will not work due to the "type" of input element. Because the way it is, you can not give it before or after attributes. Please do note that I do not mean the input type attribute, but the elements type. That is one of the CSS gotchas at least unless they change it in future.

    The reason why I said it, is to let you know that otherwise the code was good.

    This is the complete code that should work:

    .col3:before {
        content: "$ " !important;
    }
    .col3:after {
        content: ".00" !important;
    }
    tr:first-child .col3::before, tr:first-child .col3::after {
        content: "";
    }

    An alternative that you could use is the following code:

    td.col3::before {
        content: "$";
        margin-left: 4px;
        margin-top: 3px;
        position: absolute;
    }
    td.col3::after {
        content: ".00";
        margin-left: -25px;
        margin-top: 3px;
        position: absolute;
    }
    .col3 > input {
        box-sizing: border-box;
        padding-left: 1em;
    }

    The alternative code will also set the before and after into the element as well, so it looks like it is part of it and not outside of the same:

    Hope this helps, but please do let us know how it goes :)

  • Profile Image

    Answered by menstrom on May 17, 2016 at 04:27 PM

    I would like the dollar sign and .00 outside the boxes, so I used your CSS coding suggestion for hiding it on the first line, but it doesn't seem to have worked.  The label still shows "$Annual Amount.00":

    Also, I have adjusted the spacing to put a small margin between the boxes, but I can't get the label at the top of the second column to move over.  How do I shift the label in addition to the box in column two?  I tried putting in a margin-left for .col2[type="label"] but it didn't change anything.

    Thanks,

    Marilyn

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 17, 2016 at 10:46 PM

    Please inject the custom css below to the Configurable List widget to resolve the issue:

    tr:first-child .col3::before, tr:first-child .col3::after {

        display: none !important;

        padding-left: 20px!important;

    }

    If you need further assistance, please let us know.

  • Profile Image

    Answered by menstrom on May 18, 2016 at 10:07 AM

    That worked to remove the $ and the .00 from the title.  Thanks!

    Now, is it possible to move just the title "Annual Amount" over so that it left justifies with the boxes and not with the dollar signs?

    You've all been a tremendous help, and really fast, too!  I greatly appreciate it!

    Thanks,

    Marilyn

  • Profile Image

    Answered by menstrom on May 18, 2016 at 11:22 AM

    One more question on the configurable list:  the font for the text in the list is different than the font in the rest of the form.  I tried changing the font weight to normal, but it isn't really boldfaced.  It's just black and rest of the form is more of a dark grey.  How do I make the fonts the same?

    Thanks,

    Marilyn

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 18, 2016 at 11:34 AM

    Hi,

    Please try injecting the following CSS to the Configurable List Widget.

    // to move over "Annual Amount"

    th.col3 {

        padding-left: 10px;

    }

    // to correct the font weight and color

    table th {

        color: #555555;

        font-weight: normal !important;

    }

     

    The result should be as below.

    I hope this helps.

  • Profile Image

    Answered by menstrom on May 18, 2016 at 12:02 PM

    You all are awesome!  The column heading is now moved over and the column headings are now the same font.

    Is it possible to also change the before and after items ($ signs and .00) around the boxes ?  They are still in the darker black font.  I tried to put the same font lines within the codes for the addition of the items, but it didn't appear to work.

    Thanks,

    Marilyn

  • Profile Image

    Answered by Ben on May 18, 2016 at 01:12 PM

    To do that Marilyn you should change this part of the code:

    .col3:before {
        content: "$ " !important;
    }
    .col3:after {
        content: ".00" !important;
    }

    to include:

    color: #555555;
    font-weight: normal !important;

    so it would look like this:

    .col3:before {
        content: "$ " !important;
        color: #555555;
        font-weight: normal !important;
    }
    .col3:after {
        content: ".00" !important;
        color: #555555;
        font-weight: normal !important;
    }

    Do let us know how it goes :)

  • Profile Image

    Answered by menstrom on May 18, 2016 at 01:35 PM

    Weird!  I thought I tried that, because it made sense to me that this would be the way to do it.  But apparently I didn't put it in the right place or something!  Thanks again!

    Marilyn

  • Profile Image

    Answered by Ben on May 18, 2016 at 02:42 PM

    You are welcome Marilyn, I am glad to hear that it worked.

    Please do let us know if there is anything else that we can be of assistance with and we would be happy to assist with the same.