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

    Should I separate the configurable lists or recombine it with the other one?

    Asked by Benflips on July 10, 2016 at 11:36 PM

    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 11, 2016 at 05:18 AM

    It is advisable to keep the lists separate as it is, since I noticed that there are several different css being applied to your form at the moment. It may become difficult to keep track of all the changes in css and conditions made if you choose to recombine the 4 sets of Configurable Lists. 

    By keeping the Configurable Lists separate, we simply need to add the css below to split the fields into 2 rows of 3.

    th {

        display: none;

    }

    select {

        width: 161px;

    }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {

        display: block;

        float: left;

        width: 161px;

        padding: 20px 5px 1px 1px;

    }

    td.col1:before {

        content: "Affects you when?";

        font-size: 11px;

        display: block;

    }

    td.col2:before {

        content: "How often?";

        font-size: 11px;

        display: block;

    }

    td.col3:before {

        content: "Is it in?";

        font-size: 11px;

        display: block;

    }

    td.col4:before {

        content: "Is it in or on? ";

        font-size: 11px;

        display: block;

    }

    td.col5:before {

        content: "Radiates elsewhere?";

        font-size: 11px;

        display: block;

    }

    td.col6:before {

        content: "Description";

        font-size: 11px;

        display: block;

    }

  • Profile Image

    Answered by Benflips on July 11, 2016 at 11:45 PM
    That's really good, thank you.
    Can you help me get this now closer to it's label? There is less space
    between the config list entry boxes and the label before this change...
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image

    Answered by Benflips on July 11, 2016 at 11:45 PM
    Oh, and can the hint text for all of them go back to being light grey?
    It looks like I'd need to make this change across most of the config lists,
    as they seem to have become normal black
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 12, 2016 at 01:13 AM

    You can add the css below to the custom css of the list widgets to make the list closer to its label and also turn the text to light grey.

    td:before {

        color: #555555;

    }

    .col1, .col2, .col3 {

        padding-top: 0px!Important;

    }

    .col4, .col5, .col6 {

        padding-top: 10px!important;

    }

    Regards.

  • Profile Image

    Answered by Benflips on July 15, 2016 at 05:45 AM
    This did a great job of getting the two rows of the config list together,
    but not so great about getting the rows up closer to their label...
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on July 15, 2016 at 09:24 AM

    Try to add this line in your Custom CSS code for List widget:

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {


        margin-top: -20px!important;


        display: block;

        float: left;

        width: 161px;

        padding: 20px 5px 1px 1px;

    }

     

    So, just add the line marked with yellow to the existing block of CSS code, that should bring your list closer to title and look like this:

    You can put even bigger number then 20 if you want it closer.

    If you need further assistance please let us know.

    Thank you!

  • Profile Image

    Answered by Benflips on July 15, 2016 at 06:45 PM
    So, I put this code in and it made a mess of things (at least in builder
    view).
    I changed your code to -10 and it works great, thanks.
    Now, because I have a text field (that I've heavily modified to make it
    look like sub-label text for the above this configurable list) there is a
    big 'space'
    Can I have some code to make similar change to the padding of the config
    list we've just modified (top padding into the negative) so that it can
    effectively 'overlap' the textbox 'space' just like I'm getting the textbox
    above it to 'overlap' the bottom of the config list above it...
    Does this make sense? If not, please advise.
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on July 15, 2016 at 10:27 PM

    If I understand correctly, you must be referring to this field.

    What you can do also is to lessen the height of the TEXT field above the configurable list. For that element, this CSS code will do

    #cid_386{

    heightn: 3px !important;

    }

    Let us know if this is not it and if this did not work.

  • Profile Image

    Answered by Benflips on July 15, 2016 at 11:45 PM
    That is definitely the space I am referring to, and there are 3 other
    similar fields lower in the form (total of 4)
    I applied your code and it didn't seem to make a difference...
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image

    Answered by Benflips on July 16, 2016 at 12:59 AM

    I know this is still an open questionl...and I don't want it to get lost, but I have another question going back to an earlier fix on this thread by Nik_C...

     

    I found another config list (input_199) that has been split into two rows, and has extra space between the rows.

    Here is the custom CSS I have been given for it...can you tell me where I would put the equivalent of...    margin-top: -20px!important  to decrease the space between the two rows??

    =============================================

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 { display:inline-block; float: left; padding: 15px 5px 3px 3px; }

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

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

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

    td.col4:before { content: "Reason for Meds: "; 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.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: 130px; }

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

     

    select:not(:focus) {

     

        color: gray !important;

     

    }

     

    select:focus {

     

        color: black !important;

     

    }

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 16, 2016 at 01:22 AM

    Hi,

    Regarding the height of the space at the top configurable list, you can change the CSS given by my colleague, jonathan, to

    div.form-input-wide {

    height: 3px !important;

    }

     

    Regarding the decreasing of the space between rows of the config list, you can place the margin-top: -20px !important to this part.

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 { margin-top: -20px !important; display:inline-block; float: left; padding: 15px 5px 3px 3px; }

     

    Do let us know if you need further assistance.

  • Profile Image

    Answered by Benflips on July 16, 2016 at 02:45 AM
    That first piece of code - is that in the general CSS or in the CSS for the
    config list itself?
    div.form-input-wide {
    height: 3px !important;
    }
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on July 16, 2016 at 06:52 AM

    That first part of code should go in General CSS, since it applies to the whole form, and second CSS applies to configurable list.

    Let us know if you have further questions.

    Thank you!

  • Profile Image

    Answered by Benflips on July 16, 2016 at 08:45 AM

    That was a profoundly useless piece of code! It was form-wide and changed everything!

    I promptly deleted it.

    The impact I want to achieve was described by your colleague above:

    Answered by jonathan on July 15, 2016 at 10:27 PM

    He gave some code with the attempt to reduce the height of the text-field - it didn't seem to do anything.

    What I need is the gap reduced in 4 places only, not the whole form!

    There are 4 text boxes whose padding characteristics have been significantly altered so that their text 'looks' like subtext for the control above them (id 386, 393, 394, 395)

    What I'm trying to achieve is the reduction of the 'space' that I have inadvertently created by me altering the textbox characteristics in this way.

    I would like the appearance of ( inputs 320, 344, 345, 346) to be further upward - either by reducing the size of the textboxes as initially suggested, or

    perhaps altering the top padding of ( inputs 320, 344, 345, 346) in a similar way to have them move 'up' the page...but NOT if this will just mean the same problem underneath them and the next elements on the page!

     

  • Profile Image
    JotForm Support

    Answered by Welvin on July 16, 2016 at 11:45 AM

    Please try:

    li#id_320,  li#id_344, li#id_345, li#id_346{

        margin-top: -30px !important;

    }

    The result should be like this:

     

    If you'd like to adjust the spacing between the label and the input areas, you can add the following custom CSS codes:

    div#cid_320, div#cid_344, div#cid_345, div#cid_346 {

        margin-top: -15px;

    }

  • Profile Image

    Answered by Benflips on July 17, 2016 at 02:45 AM
    You absolute legends! That is looking amazing! Thank you!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...