What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Is there any way to break the configurable list widget into two lines?

    Asked by Benflips on July 07, 2016 at 11:13 AM
    So. My original design had the options for all three configurable lists in
    ...
    configurable list two lines
  • Profile Image
    JotForm Support

    Answered by Welvin on July 07, 2016 at 11:20 AM

    I have just adjusted your configurable list widget with the label "Please list any drugs or medication you are taking or have taken in the past 6 months (one medication at a time)". Please check. The custom CSS codes are the following:

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9 {

    display:inline-block;

    float: left;

    padding: 20px 5px 1px 1px;

    }

    td.col1:before { content: "Brand Name "; width: 19%; }

    td.col2:before { content: "Type  "; width: 19%; }

    td.col3:before { content: "Category "; width: 19%; }

    td.col4:before { content: "Diagnosis "; width: 19%; }

    td.col5:before { content: "Dosage "; width: 19%; }

    td.col6:before { content: "Frequency "; width: 19%; }

    td.col7:before { content: "Course "; width: 19%; }

    td.col8:before { content: "Monitored? "; width: 19%; }

    td.col9:before { content: "When last checked?"; width: 19%; }

     

    td.col1 { width: 19%; }

    td.col2 { width: 19%; }

    td.col3 { width: 19%; }

    td.col4 { width: 19%; }

    td.col5 { width: 19%; }

    td.col6 { width: 19%; }

    td.col7 { width: 19%; }

    td.col8 { width: 19%; }

    td.col9 { width: 19%; }

     

    th { display: none; }

     

    You have 9 columns so need to add 9 lines of CSSs. You will notice that I've added the label in the CSS, we need to do that to keep the alignment. 

    The other configurable list widget seems fine, it doesn't overlap the form. 

     

    Let us know if you need any further assistance. 

  • Profile Image

    Answered by Benflips on July 07, 2016 at 09:46 PM
    Thanks Welvin.
    I have just made a few minor changes (or so I thought!) but it's not quite
    appearing ideally. I deleted the 9th column, so removed CSS relating to a
    9th colomn.
    If you look now, I've tried to alter the width of colomns 4, 6 & 7 - I'd
    like 6 and 7 to be aligned with those above, but I'd like 4 to be extended
    a bit wider so it is inline with the length of 8 underneath it. Hope you
    can help.
    As for the other lists above this is my problem and any help you can
    suggest would be appreciated...
    I want to know if there is any feature whereby if I have a single-field
    infinite list or a dynamic textbox (so that I can add multiple answers in
    text form), that each time a list 'line' is completed, that a yes/no
    checkbox can appear beside it, and then have that checkbox determine
    whether the configurable list (or other field options) appear or not?
    My problem is I want to be able to alter what the next options are based on
    whether a condition is painful or not.
    A previous answer I think suggested the only other workaround appears to be
    (for example) to have say 4 visible text box fields, for up to 4
    conditions. When each condition is filled, it conditionally displays a
    field to capture 'is this painful or not' and then have the other pieces
    conditionally appear based on the answer...is this correct?
    Finally, if the above is correct, can I still have a configurable list but
    disable the add new line function so that I can have all the fields I want,
    but have it only appear related to one condition or concern? If this is
    possible, can the label of each successive configurable list (assuming more
    than one concern is input) reflect 'Details for Condition 1', Details for
    Condition 2' etc (or better yet, can the label be populated with the text
    from the answer in the 'concern' field - eg, if Condition 1 is entered as
    'Low Back Pain' then the appearing config list label will say 'Details for
    Low Back Pain'
    I know this is a complex request...but i need to find a way to make this
    work
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 08, 2016 at 03:39 AM

    Please allow me some time to check the css per your requirement. I will update you on this thread once I have the css.

    Regarding the other concern, there is currently no infinite list or a dynamic textbox where you can add a condition where a checkbox will appear beside it. I believe the suggested workaround may fit your requirement. You can disable the add new line function, however you will not be able to choose when this will be disabled or enabled, as it will remain disabled if you disable it. It is also not possible to change the label of the configurable list based on the ''Details for Condition 1."

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 08, 2016 at 04:48 AM

    Please inject the custom css below to the wizard's css tab so the columns are aligned properly:

    td.col1 { width: 19%; }

    td.col2 { width: 19%; }

    td.col3 { width: 19%; }

    td.col4 { width: 19%; }

    td.col5 { width: 19%; }

    td.col6 { width: 19%; }

    td.col7 { width: 19%; }

    td.col8 { width: 19%; }

     

    th { display: none; }

    .col6 select, .col7 select {

     

        width: 124px;

     

    }

     

  • Profile Image

    Answered by Benflips on July 09, 2016 at 07:46 AM
    Thanks, I've made the changes and they are now better aligned, but how to I
    get the 4th field the same width as the Monitored field below it? Just so
    it is visually aligned
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on July 09, 2016 at 09:26 AM

    I've fixed it for you by adding the following custom CSS codes in the widget: 

    .col4 input[type="text"] { width: 188px; } 

  • Profile Image

    Answered by Benflips on July 09, 2016 at 09:46 AM
    Thank you
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image

    Answered by Benflips on July 10, 2016 at 10:08 PM

    Hi.

    Wondering if I can now get similar coding for some of the other configurable lists in my form, including the reduction in font-weight of the labels like you did in this one.

    ---------------------------------------------

    On the page about health concerns, there are 4 separate SETS of 3 configurable lists.

    Config List 1 = "Health Challenge #..."

    Config List 2 = "How intense of severe is your pain..."

    Config List 3 = "Tell us more about the characteristics of your pain:"

    I'd love the reduction in font-weight and possibly font size for the labels of all of these 12 config lists - in this way longer labels such as " Began after obvious incident, injury or event?"won't look so messy! 

    ----------------------------------------------

    I then need help figuring out what to do with Config List 2 & 3 in each set.

    These used to be one config list, and I was going to get your help to separate them out into multiple rows like in this earlier thread.

    I separated the 2nd list out from the 3rd, primarily to have a specific label related to the fields contained therein. On my form, I have put in a text field in the FIRST set of three lists, for you to have a look at. It shows kind of how I would like this to appear, given that the config list doesn't currently support hover text or sub-label text.

    Can this text field be coded to get closer to the above field to look more like subtext?

    And if we continue to keep this list separate from the next one, can you equalise the 3 input columns so Right Now, At worst and At best are all the same width.

    Also, if we keep this list separate, can we just completely get rid of the labels above each field, seeing I have the same text in as 'hint text'

    ------------------------------------------------

    And separately, I need your advice on what to do about the 3rd config list. 

    I'm trying to be most effective with the use of screen-space - is it smart to keep it separate like now, or recombine it with the second list and then get you to split it over 2 or more rows like you did in this earlier thread?

    If  you feel re-combining them serves a purpose, can we somehow maintain the labels as described above, including the text field to simulate sub-label text?

    If not, keeping them separate would be needed, however the third list would still need to be split over two rows - if this is the answer, then can you split the 6 fields into 2 rows of 3, all having the field-width of the 'Description' field

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 10, 2016 at 11:37 PM

    You can inject the code below into the Custom CSS section of each configurable list wizard to adjust the font-weight and font size of the labels.

    th {

        font-weight: 500;

        font-size: 11px;

    }

    As for your other concerns, I have moved them to their own threads to better assist you and to avoid any confusion. Please follow the links below to view these threads:

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

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

    Regards.

     

  • Profile Image

    Answered by Benflips on July 11, 2016 at 02:46 AM
    Thank you. I have applied this change to all of the config lists.
    I await suggested feedback on the two new threads you have started!
    Thanks again
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...