Configurable List: How do I insert line breaks?

  • Pete36
    Asked on November 13, 2018 at 3:30 AM

    How do I insert line breaks. I want my form to have boxes as follows:

    FIRSTNAME MIDDLENAME LASTNAME

    STREETADDRESS

    CITY PROVINCE POSTALCODE

    COUNTRY

  • roneet
    Replied on November 13, 2018 at 8:02 AM

    Do want the configurable list in the following format?

    Configurable List: How do I insert line breaks? Image 10

    Demo Form: https://form.jotform.com/83163716154961

    Feel free to clone and test the form.

    Hope you find this helpful.

    Thanks.

  • Pete36
    Replied on November 13, 2018 at 2:43 PM
    Thanks for replying.
    What I want are multiple rows, comprising a set of data, with the ability to then add additional data sets. For example:
    John Quincy Adams
    123 Main Street
    Somewhere, State USA
    [Add Another]
    And, if I added another, the same multi-row fields would come up to add:
    George Washington Adams
    123 Main Street
    Somewhere, State USA
    [Add Another]
    etc.
    ...
  • DonaldHag
    Replied on November 13, 2018 at 4:18 PM

    You have to inject custom CSS into the form to modify the form fields. Please provide the URL where you have added the configurable list widget so we can assist you with the CSS required to create this layout.


  • Pete36
    Replied on November 13, 2018 at 5:43 PM
    Thanks for getting back to me so quickly.
    Here is the link:
    https://form.jotform.com/82916052527256
    What I am trying to do is be able to add additional directors. Here is a screen shot of what the information I wish to be able to “add more” of looks like:
    [cid:image001.png@01D47B63.EC0227D0]
    I have added below it the configurable widget, but can’t find how to insert row breaks.
    Thanks in advance for your help.
    Peter
    ...
  • Elton Support Team Lead
    Replied on November 13, 2018 at 7:58 PM

    We could not see your screenshot here so I'll base it on your initial post.

    Here's the CSS code. Inject this in the configurable list widget settings.

    .mobileColumnName {display: block; font-weight: bold; margin-bottom: 4px; } table#list tbody>tr:first-child {display: none; } tr td {float: left; } td.col4 {clear: left; } td.col5 {clear: left; } td.col8 {clear: left; } td.col9 {clear: left; } table#list tbody>tr+tr+tr {margin-top: 20px; display: block; border-top: 1px solid #d2d2d2; padding-top: 20px; }

    This is how it'd look after:

    Configurable List: How do I insert line breaks? Image 1 Screenshot 30

    When you click the add button,

    Configurable List: How do I insert line breaks? Image 2 Screenshot 41

    If you need further assistance, let us know.

  • Pete36
    Replied on November 14, 2018 at 2:43 PM
    That is excellent! Thank you so much.
    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:51 PM

    I'm glad that's the layout you're hoping for. To avoid confusion, I moved your last question to a separate thread:

    https://www.jotform.com/answers/1643480

    I'll reply to you there shortly.