How can I make the Street Address field inside the Configurable List wider?

  • Pete36
    Asked on November 14, 2018 at 4:50 PM
    Just one further request: how do I make the box wider for the Street Address field?
    Peter
  • Support_Management Jotform Support
    Replied on November 14, 2018 at 4:56 PM

    Hey Peter - You have a couple of Configurable List widgets in this form https://www.jotform.com/82916052527256

    There's one in Page 4, Page 7 and Page 9. Can you tell us which specific Street Address field you want to be adjusted? Can you also tell us by how much would you want it to be wider? You can share a screenshot of the exact field you want to adjust. Just post it directly to this thread and make sure you won't reply to this email.

    Related guide: How-to-Post-Screenshots-to-Our-Support-Forum

  • Pete36
    Replied on November 14, 2018 at 6:17 PM

    Jim,

    I have copied your code to use in three places where I want the ability to capture multiple people. In each case, I would like the Street address box to be at least 3X as wide as it now is.  Also, when I used the "duplicate" button to copy what you had sent me (for insertion in Shareholder and Officer information, I lost the formatting that created multiple fields in one row.

    I've looked at the CSS code, but my skills aren't good enough to know how to lengthen the width of a field box, or to move fields to the next line. I can't find anything on JotForm website that explains this, either.

    It would be much easier if I could simply apply a widget to a group of fields (name, address, etc.)  that I wish to be repeated as a group if the user wishes to add one or more additional people to a list.  I guess that functionality doesn't exist.

    In the meantime, please give me your advice on how to widen fields, put multiple fields on one row, and trigger row breaks within the configurable widget.

    Thanks!

    Peter

  • Support_Management Jotform Support
    Replied on November 14, 2018 at 7:49 PM

    Please do the following to get this done:

    1. Add these CSS codes to your FORM BUILDER (not to the configurable list widgets).

    Complete guide: How-to-Inject-Custom-CSS-Codes

    iframe {

      width: 100% !important;

    }

    2. Append these CSS codes at the end of the existing codes in the CONFIGURABLE LIST widget on PAGE 4:

    .col4 textarea { width: 295%; }

    3. Do the same on PAGE 7 using these codes instead:

    .col4 input { width: 222%; }

  • Pete36
    Replied on November 16, 2018 at 2:24 PM

    Jim,


    Those changes worked like a charm!

    Thanks.


    Peter