Using textarea in input tables rather than input

  • Profile Image
    luke.roskilly
    Asked on May 28, 2021 at 06:53 AM

    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

  • Profile Image
    Vick_W
    Answered on May 28, 2021 at 07:39 AM

    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


  • Profile Image
    Frode_F
    Answered on May 28, 2021 at 10:56 AM

    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.

    1622213638_60b10406b3e5f_Screen Shot 202

    Thanks

  • Profile Image
    luke.roskilly
    Answered on June 01, 2021 at 10:31 AM

    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.

  • Profile Image
    Frode_F
    Answered on June 01, 2021 at 10:44 AM

    No problem :)

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

    Thanks for using Jotform :)