How do you set the height for a Gravity Forms paragraph text element

Question

I was able to set the border color using CSS in the bottom of our WP starter theme styles.css using the following command but the height and rows don't seem to work - can someone tell me the correct syntax (Note: I'm using the gf_right_half for the CSS class name:

body #gform_wrapper_11 .gform_body .gform_fields #field_11_8.gfield textarea {
    border: 1px solid green;
    width: 100%;
    height: 5px !important;
    rows: 5 !important;
}

can you create a demo? did you tried display:block;? – G.L.P Apr 27 '15 at 05:46 — G.L.P, Apr 27 '15 at 05:46

sandervh · Answer 1 · 2020-06-28T16:31:21.897

5

I'm a little late to the party, but for future reference:

in your theme's functions.php add:

// Change textarea rows to 2 instead of 10
add_filter( 'gform_field_content', function ( $field_content, $field ) {
    if ( $field->type == 'textarea' ) {
        return str_replace( "rows='10'", "rows='2'", $field_content );
    } 
    return $field_content;
}, 10, 2 );

edited Jun 28 '20 at 16:31

answered Jun 28 '20 at 13:41

sandervh

53
1
5

Great timing for answer, works a treat thanks. The proper way it should be done. – joshmoto Jun 29 '20 at 19:25
Adjusting the functions.php file seems like the harder way but actually is a hell of a lot easier than CSS and allows field resizing by the user afterwards. – LaZza Mar 15 '23 at 19:59

score 2 · Answer 2 · answered Apr 27 '15 at 16:14

Figured it out - I needed to set a min-height value to 25px and then the height value for 50px for the field to make it work (the min-height value was needed to make it work). Some style sheet somewhere must be making a paragraph field min-height value around 300px or so, which takes up too much screen real estate. Not sure if that is Gravity forms setting that size, but anyway, got it working. Thanks.

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

There is no rows property is CSS. You have to use height.

In your case set your height to be larger than 5px.

textarea's rows, and cols attribute in css

edited May 23 '17 at 12:14

Community

1
1

answered Apr 27 '15 at 05:48

Miguel Mota

20,135
5
45
64

When I remove rows and set height to 5, 50, or 100, the paragraph text block always remains the same size. – user3574024 Apr 27 '15 at 07:47

score 0 · Answer 4 · answered Mar 15 '19 at 22:07

Gravity Forms also has some options that has some css classes that you can choose from and switch between in the UI. small has a height of 80px, medium has a height of 160px, and large has a height setting of 320px.

Gravity Forms Field Size Setting (look towards the bottom of the image)

It's actually likely that the field was actually set as large in the UI initially, as that would set the height to be over 300px.

Otherwise, you can target the form input by the ID like this:

#field_11_8 {
  height: 50px;
}

Since there should only be one ID on the page, the CSS should know exactly which element to style.

score -1 · Answer 5 · answered Jul 16 '15 at 17:13

-1

I would set the rows in wp-content\plugins\gravityforms\includes\fields\class-gf-field-textarea.php

answered Jul 16 '15 at 17:13

rgfx

330
2
11

1

You've suggested editing the core of a plugin rather than using a hook to override it. If the plugin is updated, your edit is also removed. – wharfdale Feb 02 '17 at 12:35

How do you set the height for a Gravity Forms paragraph text element

5 Answers5