What CSS code can I use to change the size of this widgets fields

  • Rides_Grizzly
    Asked on April 13, 2024 at 7:37 PM

    What CSS code can I use to change the size of this widgets fields Image 1 Screenshot 20

  • Shane JotForm Support
    Replied on April 14, 2024 at 2:08 AM

    Hi Rides_Grizzly,

    Thanks for reaching out to Jotform Support. You can use the custom CSS code below to increase the size of the fields for the Autocompleted Address widget, along with the text size:

    /* 13865211 - Change field sizes - SD */
    input {
        height: 40px;
        font-size: 16px;
    }
    /* End */

    To inject the CSS in your form, please check the steps in the screenshots below:

    1. Select the widget, then click on the Wand icon.
    2. Go to the Custom CSS Tab.
    3. Paste the custom CSS code.
    4. Click on Update Widget.

    What CSS code can I use to change the size of this widgets fields Image 1 Screenshot 40Next, increase the height of the widget to make room for the bigger fields:

    1. Click on the Gear icon.
    2. Set the Height to 280.

    What CSS code can I use to change the size of this widgets fields Image 2 Screenshot 51

    Do the same for the second Autocompleted Address widget. See screenshot below for the expected result:

    What CSS code can I use to change the size of this widgets fields Image 3 Screenshot 62

    Here is my clone form which you can check and clone.

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

  • Rides_Grizzly
    Replied on April 14, 2024 at 12:44 PM

    Hi Shane, Thank you so much. I will give this a try and let you know if I run into any issues.

  • Rides_Grizzly
    Replied on April 14, 2024 at 2:53 PM

    Hi Shane you're AWESOME ! Thanks What CSS code can I use to change the size of this widgets fields Image 1 Screenshot 20

 
Your Answer