How to change Textbox size and padding?

  • Thosbryan
    Asked on February 21, 2019 at 9:26 AM

    15507591551259F5BF 969B 4A8C 84B1 4EE97E Screenshot 10


  • Bojan_R
    Replied on February 21, 2019 at 10:06 AM

    You can change the size of that box in two ways.

    1. Click on gear, it would be open "Short Text Entry Properties", look at the guide below:

    1550760580css box Screenshot 10

    But here you can change only the width of your box.


    2. You can embed CSS code in your ADVANCED DESIGNER and change whatever you want. 

    1550761036css box 2 Screenshot 21



    I explore your form, and here is a code you should embed in it.


    #cid_22 {

        width : 400px;

        height : 50px;

    }

    Also, here is a guide How-to-Inject-Custom-CSS-Codes.

    Hope this helps. Let us know if you need any further assistance.

  • Thosbryan
    Replied on February 21, 2019 at 11:43 AM
    Thank you for your response but that didn't really address my problem. I am trying to reduce the horizontal distance between two adjacent form elements. The distance between City and state is huge. I want them almost touching. What I am trying to change are the parameters of the blue bounding box, not the size of the data box.
    Please try again.
    Thanks.
    Tom
    Sent from my iPad
    ...
  • Bojan_R
    Replied on February 21, 2019 at 12:41 PM

    I am sorry to misunderstand you. I looked at your form again and saw that you made some changes. If you want to change the parameter of the blue box input this code in CSS:

    #id_22{

      padding-right: 0px;

    }


    Please don't hesitate to ask if you need further assistance. 

  • Thosbryan
    Replied on February 21, 2019 at 3:43 PM
    Hi
    Correct me if wrong, but doesn’t that padding relate to positioning of the data within the text box. I did find horizontal padding under design line layout using form designer that helped.
    Tom
    Sent from my iPad
    ...
  • David JotForm Support Manager
    Replied on February 21, 2019 at 5:40 PM

    The previous code is to target the padding dimension of a specific field(no the input), but you can also reduce the horizontal and vertical padding through the Form Designer as you have already done it:

    1550788765vertical Screenshot 10

    Open a new forum thread if you need anything else, we will be glad to assist you.