How to make the Configurable List Widget column wrap to a new line

  • Profile Image
    upandacross
    Asked on June 09, 2015 at 04:55 PM

    In my form, I collect a "key" field (customer ID) associated with a customer, and then fill out information about each account they wish to establish (e.g. Account Type, Date to establish account, assets to be placed in account, beneficiary(s), source(s) of funds, tax liabilities of fund sources, etc.)

    I can almost get there with the two widgets referenced in my question but there is insufficient form width to display all input fields. If there was a way to embed a newline or line break, it might work. Perhaps there is a CSS trick?

    Essentially, this is a sub-form problem with each account referenced by a single key (customer ID).

    I guess the alternative is to create a separate form for each account and manually keep track of the customer ID. However, my desired approach give everything with one screen.

    Please advise.

  • Profile Image
    jonathan
    Answered on June 09, 2015 at 05:10 PM

    If my understanding of what you wanted to achieve is correct, you wanted the Infinite List or Configurable List to wrap to a new line when the right-most column is not sufficient to the width of the form.

    Basically you wanted the widget to have its column situated on a new line.

    Please correct if this is not what you meant.

    Yes, I think a CSS trick can do it. I'll just have to test for the right one.

    We will get back to you when we find the applicable CSS code.

    Thanks.

  • Profile Image
    jonathan
    Answered on June 09, 2015 at 05:18 PM

    I checked your jotform http://www.jotform.us/form/51596050689162 but there was no Widgets on it.

    I suggest you apply first the widget you wanted to use, and we will use your form as reference.

    Thanks.

     

  • Profile Image
    upandacross
    Answered on June 10, 2015 at 10:10 AM

    OK, I've updated the form. Sorry, Jonathan, for the confusion.

  • Profile Image
    Welvin
    Answered on June 10, 2015 at 12:44 PM

    This could be possible with custom CSS codes, but we need to look into that matter. Will get back to you soon.

    Thanks

  • Profile Image
    upandacross
    Answered on June 11, 2015 at 11:17 AM

    Have you considered adding something to the markup language? For example, you could add a "line break" command. For that matter, you could also add "line separator", "heading", or any number of other markup commands.

  • Profile Image
    KadeJM
    Answered on June 11, 2015 at 03:00 PM

    After taking some time to fiddle around with this for awhile I believe one of my colleagues and I have come to a feasible solution for you below as an example of how this could work for you.

     

    Demo:  

     http://form.jotformpro.com/form/51615971309963   [CLONE IT!]

     

    Screenshot: