Change the sizes of the number and textarea input field

  • Eric Kulbeck
    Asked on October 14, 2022 at 11:50 AM

    Hi, would like to change the sizes of the number and textarea input fields; and possibly drop the textarea down to the next line on the form. Can you help with the CSS code?
    Thanks!

    Page URL: https://www.jotform.com/help/282-how-to-set-up-the-configurable-list-widget/
  • Ryan JotForm Support
    Replied on October 14, 2022 at 12:03 PM

    Hello Eric,

    Thanks for reaching out to Jotform Support. To assist you correctly, can you provide us details with regards to your concern? If you can provide us the Form URL of the form and a screenshot of your textarea input field, then it would help us identify which field you want us to provide a CSS code with.

    Once we hear back from you, we'll be able to help you with this.

  • warmwaller
    Replied on October 16, 2022 at 8:14 PM

    It is the textarea and the number field that I would like to change sizes of ...


    https://form.jotform.com/warmwaller/toys-for-tots-application


    1665965675 634c9e6b5cffc Screenshot 10

  • Gilbert JotForm Support
    Replied on October 17, 2022 at 12:49 AM

    Hi Eric,

    Try adding these CSS codes on the Custom CSS tab of your Configurable List widget:

    input[type=number]{
    
width: 40px !important;
    
} /*Change size of Age field*/
    

    

    
textarea {
    
width: 200px;
    
} /*Change size of textarea field*/
    

    
td.col1,
    
td.col2,
    
td.col3,
    
td.col4,
    
td.col5,
    
td.col6,
    
td.col7 {
    
display: inline-block;
    
float: left;
    
padding: 20px 5px 1px 1px
    
}
    

    
.mobileColumnName {
    
display: block;
    
min-height: 20px;
    
padding-bottom: 4px;
    
box-sizing: border-box;
    
font-weight: 700;
    
}
    

    
th {
    
display: none
    
}
    

    
.add {
    
margin-top: 15px
    
}


    1665981822 634cdd7ed90fd Screenshot 10

    That should change the size/width of the number and textarea field as well as bring the textarea field to the next line.

    1665982113 634cdea19b2b4 Screenshot 21

    If you want to change the width of the number or textarea field, just change the width values on these codes:

    input[type=number]{
    
width: 40px !important;
    
} /*Change size of Age field*/
    

    

    
textarea {
    
width: 200px;
    
} /*Change size of textarea field*/


    Give it a try and let us know if you have any other questions.