Using textarea in input tables rather than input

Hi!

Firstly, I'd like to say how enormously impressed I am with Jotform - the UI, level of customisation and sheer polish of the system are amazing - well done, and thank you!

I have hit a barrier in one regard, though: I'm just trying to set up an input table, with multi-line text input fields in each cell. I've altered the cell height via custom CSS, but notice that you're using <input> fields rather than <textarea> for the text input, which can't be made to wrap content over multiple lines via CSS. Is this somehow possible via other means / would it be possible to introduce this option?

Here's the use-case: https://www.dropbox.com/s/mj5m8fujqxrnt7s/Screen%20Shot%202021-05-28%20at%2011.45.51.png?dl=0

https://eu.jotform.com/build/211463634917054

(I've just tweaked the top table for now.)

All the best,

Luke Roskilly | luke.roskilly@one.org | Senior Digital Product Manager, Digital Innovation and Insights | +44 (0)7765 241 782 | ONE.ORG

Hi Luke,

As per testing, unfortunately, it's not possible to wrap the text inside the Input Table field as it is impossible to auto-resize the cells inside the table.

Alternatively, your requirements are possible with the Configurable List widget, using the Text Area element, for your reference: How-to-set-up-the-configurable-list-widget?

Let us know if you have any questions.

Thanks

Hi Vick,

Many thanks! I've dropped a Configurable List at the end of the form, and it looks like a good solution. The only problem is that this element always seems to shrink to a width smaller than the width of the form, and the individual columns are quite narrow. Is it possible to make sure the columns (two in my case) fill the whole width of the form?

https://www.dropbox.com/s/qcg4uzn85qehzia/Screen%20Shot%202021-05-28%20at%2013.38.04.png?dl=0

I've tried setting the widget width in the editor and targeting everything I can find in the code via CSS, but it always seems to shrink back to a smaller width on load. I can see this transition is applied gradually, so is there some JS at work doing this, maybe? Any override would be much appreciated.

Cheers,

Luke

Hi, Luke

You can do this simply by adding a small piece of CSS to the widget:

table, textarea { width: 100%}

Follow the steps in the image:

1. Select the Widgets Settings
2. Select Custom CSS
3. And add the code above
4. The form should auto-update, but you could also click on Update Widget
5. To see the new width in action, you may need to reload the webpage.

Thanks

Fantastic - thank you! Weirdly, I'd trid exactly this, but the form element in the editing view didn't update, and I'd assumed it wasn't working on the front-end view either. I eventually needed to duplicate the original form element and recreate it, and that worked. May be a small glitch in there somewhere.

No problem :)

The view sometimes does not update sometimes properly, so if in doubt, refresh the webpage.

Thanks for using JotForm :)