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

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

    Asked by ttran976 on May 04, 2016 at 11:23 AM

    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 would like to learn how to format the value so that a number 1851.26 displays as 1,851.26.  
    Page URL:
    https://www.jotform.com//?formID=60676961450966

    format column width and configurable list
  • Profile Image
    JotForm Support

    Answered by KadeJM on May 04, 2016 at 12:30 PM

    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.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 04, 2016 at 05:57 PM

    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

    }

  • Profile Image

    Answered by ttran976 on May 11, 2016 at 10:55 AM

    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.  

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 11, 2016 at 11:14 AM

    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.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 11, 2016 at 11:50 AM

    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?

  • Profile Image

    Answered by ttran976 on May 12, 2016 at 04:17 PM

    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.  

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 12, 2016 at 05:29 PM

    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.

  • Profile Image

    Answered by ttran976 on May 13, 2016 at 08:55 AM

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

  • Profile Image
    JotForm Support

    Answered by Kiran on May 13, 2016 at 10:27 AM

    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!!