How to change the size of a field using custom CSS code ?

  • avwhittingham
    Asked on January 26, 2016 at 11:57 AM

    All is great thanks apart from the fact that during the final setup my 'Home phone Number' fields have moved, I've altered the size of the area code with css but proportions and spacing is all wrong and I'm under a bit of pressure to get this finished, all advice gratefully received

     

    Tony

     

    I've got it sorted now but I presume that I've altered a setting to give fixed field width which has distorted the proportions, any ideas?

  • Kevin Support Team Lead
    Replied on January 26, 2016 at 12:05 PM

    I checked your form, and the field you are talking about is currently displayed like this: 

    How to change the size of a field using custom CSS code ?  Image 1 Screenshot 20

    I also checked it and I can not see any style applied, could you please tell us how would you like to display it ?

    We will wait for your response.

  • avwhittingham
    Replied on January 27, 2016 at 6:04 AM

    Thanks for your reply, I'm still finding my way around jotform , which I think is a fabulous app as I've previously worked with google forms, but after I created my form I started to play around with the settings in the designer interface, all my fields became the full width of the page, which wasn't a problem apart form the phone fields which overlapped each other. I created a masked entry for the mobile phone but had to inject css to correct the positioning of the home phone field although you will notice that the hyphen is incorrectly placed as a result.

    After injecting the css within the formstyles interface the form appearance changed but the code no longer seems to exist within the console.

    I was wondering if there was an easy explanation as to which setting had created this issue for me and if there is an easy way to reset all the fields to a default size

     

    Thanks

     

    Tony 

  • mert JotForm UI Developer
    Replied on January 27, 2016 at 10:00 AM

    Hi Tony,

    To reset all of the styling of your form, you can choose the "Default" option for "Theme" on form "Properties". Please, see the steps from the below:

    How to change the size of a field using custom CSS code ?  Image 1 Screenshot 20

     

    Please, try this one and let us know the results.

    Thanks.