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

    Alter width of text box within table

    Asked by angelawilliams on August 25, 2015 at 09:55 PM

    I have a form with three columns created with matrix.

    A reference number in column 1.

    A space to enter a date in column 2.

    A space to enter a description of an activity undertaken on that date in column 3.

     

    I am not able to understand how to increase the width of the text box in column 3.

    Can anyone assist me please?

    And a second question.

    Am I able to copy this into a larger form, which does not have any other tables in it?

     

    thanks in anticipation!

     

    Page URL:
    http://www.jotform.com/?formID=52368108615860

    Screenshot
    table thanks 3 and increase
  • Profile Image
    JotForm Support

    Answered by Charlie on August 26, 2015 at 03:46 AM

    Hi,

    You can do that by adding this custom CSS code in your CSS tab in the Form Designer Tool:

    #cid_1 > table > tbody > tr > td:nth-child(3) > input {

        width: 70% !important;

    }

    You can adjust the value of the width with your own preference.

     

    Let us know if that works.

  • Profile Image

    Answered by angelawilliams on August 26, 2015 at 04:12 AM

    thanks Charlie for your response.

    I have pasted the CSS code, and can see in my trial form that I can make the activity section larger, but how to make the space between the two columns smaller?

    also, how can I do this within a larger form, where the need for the table is only in some sections, will it similarly work there?

     

    thanks

     

  • Profile Image

    Answered by Sammy on August 26, 2015 at 06:44 AM

    Kindly try the following CSS snippet

    .form-matrix-column_0 {
        width : 60px !important;
    }

    the zero denotes the column i.e 0, 1, 2 e.t.c

    You can use the CSS in a larger form the #cid_1 will change since it is a unique identifier assigned to a table, this allows you to style specific tables

  • Profile Image

    Answered by angelawilliams on August 27, 2015 at 02:03 AM

    thanks Sammy,

    I am nearly there now, just need to tweek the length of the box so all text is visible on the final form.

    appreciate your help

  • Profile Image
    JotForm Support

    Answered by Charlie on August 27, 2015 at 07:10 AM

    Glad to hear that our suggestions helped. If you need more assistance on this, please let us know.

    Thank you.