Field height

Hi lotte2015,

Sure, to adjust the height of a Paragraph Text field you’d just need to adjust this CSS:

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    height: 120px;
}

This is the height set by default (120 pixels), however you can increase this as much as you’d like.

In case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

Last, I wanted to also mention something kind of neat about paragraph inputs. While we set the default height with the style mentioned above, the user can always change the size of this field if they’d like. All they need to do is click down on the bottom right corner of the field. Here’s a screencast video where I demo that.

I hope this is helpful! ??

Hi Jess,

Thanks for your reply and for the CSS and video:-). Strangely enough neither works on my blog… I added the CSS code in the Advanced section of the plugin (under CSS Classes) but nothing changes. Also, when I try to adjust the size of the box on my blog I can only adjust the width, not the height. I’m not really sure why this is happening, do you have any advice? Thanks!!!

I also added the CSS to the Additional CSS section via the Customize editor but this also doesn’t solve the problem:-(

Hi lotte2015,

I’m sorry to hear this didn’t work as intended for you, but I see the fix you need. Could you try adding an !important to the end of that style? Here’s how that would look:

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    height: 120px !important;
}

Of course, you can still change the 120 pixels to any other number you’d like.

Also, I took a look to find why it’s not possible to modify the height of this field in the way I’d mentioned (dragging the corner), and I found the cause — it’s a style added by your theme. In case you’re curious, here’s a screencast video that shows my testing for this.

In any case, this revised CSS should allow you to make this field as tall as needed.

Hope this helps! ??

Hi Jess,

Thank you for checking and for the new solution. However, even with the important added I don’t see a change in the height of the field:-(. Is there anything else I can try? I added the code both in the additional CSS as well as directly in the plugin.

Hi lotte2015,

Could you please share a screenshot/s of anywhere you’ve tried adding this CSS? I may be able to identify the issue from that.

Also, if you have any caching plugins installed on your site, be sure to either clear them or deactivate them.

Thanks and please let me know ??

Hi Jess,

Thanks so much for your help! I’ve purged all cached files several times. I couldn’t find a way to add the screenshots here so I uploaded them to my blog, here are the links:

https://www.phenomenalglobe.com/wp-content/uploads/2018/02/Screenshot-WP-form-1.jpg
https://www.phenomenalglobe.com/wp-content/uploads/2018/02/Screenshot-WP-form-2.jpg

I hope this helps to figure out the issue! Perhaps my theme (Tundra by Pipdig) is incompatible with the plugin?

Thanks!

Hey Jess,

It works now! It seems I made a mistake in the CSS code:-) But all fixed now and it looks great. Thanks for all your help!

Lotte

That’s great to hear, Lotte! Thanks for letting me know ??