How do I format a number, in the Configurable List - Form Widget? and How do I define the column width?

I'm trying to format a number so that it is right justified.  I new to CSS, however in reading the "How to set up the configurable list widget, I have attempted to include the following code and it doesn't seem to work.  

.col2, .col5, {

text-align: right justified

width: 7px

}

The column widths don't change at all.  The text or value in the field continues to be left justified.  

I see that you wish to format your configurable list widget but are having some issues setting the column width and text alignment

Please allow us to investigate this more to assist in correcting it for you and we will update you about this with a possible solution as soon as we can.

Additionally, you've asked a secondary question about formatting a numeric value so I have moved that to a new thread topic over here https://www.jotform.com/answers/832569.

I do appreciate your patiences and also I apologize as I forgot to mention originally that we have a guide for setting up the configurable list https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget which should be very helpful to you for this in case you haven't seen it already.

You can use something like below which controls width of a textbox as an example: 

input[type="text"] {

   width: 75px;

}

And for the text alignment try something like this instead:

.col2, .col5 {

  text-align: justify;

  text-justify: Total Billed

}

I don't seem to be able to adjust the column width, no matter what I do.  When I right justify, it is only the label name that moves,  the value of the field remains the same.  

This is quite frustrating.  

I do apologize about the frustrating and inconvenience for that not working properly.

Please allow me a bit more time to fully test this further to come up with a better solution and I will update you again as soon as I possibly can.

I've been fiddling with this a bit more in depth to try to help you with this problem more.

Using something like this below will target the entire element and push all the labels to the right:

th {

text-align: right;

}

If you don't want that or only certain labels then you have to target them individually like this:

td.col5, td.col5  {

text-align: right;

}

As for the width of the fields you have to do it as I said above and depending on the input you need to also specify the type in it to give you full css control over it:

input[type="text"] {

   width: 75px;

}

or

input[type="textarea"] {

   width: 75px;

}

or

input[type="select"] {

   width: 75px;

}

The inputs such as the placeholders you have should go like this:

::-webkit-input-placeholder {

text-align: right;

}

:-moz-placeholder { /* Firefox 18- */

text-align: right;  

}

::-moz-placeholder {  /* Firefox 19+ */

text-align: right;   

}

:-ms-input-placeholder {  

text-align: right;   

}

Were you meaning that you also wanted the typing input justified as well?

No matter what I try, I cannot get the column width to change.  Is there any way I can talk with someone?  

Yes.  I also want the typed input to be right justified, so that numbers are aligned.  

I see that you have a total of 6 columns in your form. 

To adjust the width of fields using CSS, you will have to use the field's "class" as its selector. For example, for column 1 it would be:

td.col3

In the Configurable List widget in your form, "td" refers to where the input is under and "th" refers to the column header. So if you put in th.col3, you are referring to the column header "Quantity".

Now that we know how to select the columns, we can now select the field under it by adding the "input" tag. 

td.col3 input{

width: 50px;

text-align: right;

}

The code above would result to this:

Both width and text-align properties have taken effect.

If you want to have other fields in your form to have the same style. You can add the selector of each field separated by a comma.

td.col3 input, td.col5 input{

width: 50px;

text-align: right;

}

Which would result to this:

However, what my colleague have explained above is also correct, if you want to select every input that has the same type you can use:

input[type="text"] {

   width: 75px;

}

The code above will change the width of every input that has the same type which is "text".

--

If you want to select a drop-down field, however, to change its width, you can refer to the example below.

td.col2 select{

width: 200px;

}

I hope this helps. Let us know if you need any further assistance. Thank you.

Thank you so much.  This was very helpful.  I think I figured it out now.  Most appreciative of your willingness to keep helping me.  

Great! It's our pleasure to assist you. Please do not hesitate to get in touch with us if you need any further assistance. We will be happy to help. 

Thank you for using JotForm!!