Edit a configurable list.

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

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.

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

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:

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 :)

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

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.

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

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

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.

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

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 :)

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

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.