How to change the textarea height in Gravity Forms

Need to adjust the height perfectly down to the last pixel of the textarea (Also known as the paragraph text) field in Gravity Forms?

The paragraph text field size control in Gravity Forms.

Gravity Forms provide you with a basic drop down box setting to control the size your fields and text areas.

However, its quite limited as it only gives you three options of small, medium and large for control the sizing, and you cannot change width and height separately.

On most of my projects, I will set the field size to large so that its full width but the problem here is the textarea often becomes too big in height.

That’s one tall text area!

Below you can check the CSS via your favorite inspector tool you will see that Gravity Forms has out of the box responsive rules for height.

If we add a new line of CSS we need to make sure it will overdrive the responsive class, simply adjusting height with the rule .gfrom_wrapper textarea.large will not work, unless you want to rewrite every screen width rule, which you really do not want to do unless you have a unique requirement.

Here is a simple CSS rule that you can add to your WordPress websites CSS file to control the textarea height using pixels:

body .gform_wrapper .gform_body .gform_fields .gfield textarea {height: 200px;}

And with one small change we can control both width and height:

body .gform_wrapper .gform_body .gform_fields .gfield textarea {width: 200px; height: 200px;}

You can also control the textarea that has a field size of either small, medium or large by extending the CSS rule with either .small, .medium or .large.

This code for example will only change the height of the textarea that is set to medium.

body .gform_wrapper .gform_body .gform_fields .gfield textarea.medium {width: 200px;}

I hope this does the trick for you, feel free to ask any questions below.