Configurable List - can one column be fixed text?

  • Profile Image
    bethe111
    Asked on April 16, 2019 at 10:01 AM

    I’m trying to build a scoresheet form for Doubles tennis.  There will always be 8 rows of data, so I don’t need to be able to add or delete rows. 

    1) I would like the first column, Winner, to display on every other row. Don’t want users to have to mark it twice for each pairing (we call them Lines).  Can the dropdown options pull from where I ask for Home and Away teams in questions at top of the form? {Away} {Home} ?

    2) I need the second column to be fixed text.  These will always be the same so I don’t want users to have to drop these down.  Where I have Away and Home, is it possible to pull from the questions at the top of the form here also? Like this:

    L1 {Away}

    L1 {Home}

    L2 {Away}

    L2 {Home}

    L3 {Away}

    L3 {Home}

    L4 {Away}

    L4 {Home} 


    Thanks for your help! You’re always so helpful and prompt!

  • Profile Image
    BJoanna
    Answered on April 16, 2019 at 12:15 PM

    I'm sorry but I do not fully understand your questions. It is not possible to remove a field from every other row. 

    Can the dropdown options pull from where I ask for Home and Away teams in questions at top of the form? {Away} {Home} ?

    Can you please clarify this request? 

    If you need fixed text you can use the "Static" option.

    How to Set Up the Configurable List Widget

  • Profile Image
    bethe111
    Answered on April 16, 2019 at 01:43 PM
    I tried using Static, but that only allows for the same text on every row. I need each row to have different titles than all the other 7 rows, but those 8 rows would always be the same from form to form.
    Re: the highlighted question - you know how in the reply emails you specify the info you want displayed by putting these { } around them? I was hoping I could do that within the form for the home and away teams. Does that make sense?
    Beth Ng
    Independent cabi Stylist
    Cell: 949.887.4799
    view the current Collection Here
    For the latest styling tips, trends, and outfit ideas, visit the cabi blog Here
    Get social with me!
    FB: BethNgCabiStylist
    Insta: BethNgCabiStylist
    Pinterest: BethNgCabiStylist
    ...
  • Profile Image
    ashwin_d
    Answered on April 16, 2019 at 03:12 PM

    Please note that we can inject custom css code in the widget to display fixed different static text in each row. 

    Please take a look at the following demo form I created and see if this is something similar which you want to achieve:  https://form.jotform.com/91056196594971

    Please let us know in which form you want to achieve this and we will share the required custom css code.

    We will wait for your response.

  • Profile Image
    bethe111
    Answered on April 16, 2019 at 03:26 PM

    Yes, that's definitely a start.  I don't need the brackets around the words though.  I was just hoping to pull that data from where the user fills in the Home Team and Away Team up above.  Next I need the players' names stacked on top of each other Away, then Home, then Away, then Home, etc. 4 times.  And the scores need to be stacked on top of each other also, so that the Away players' scores are next to the Away players' names and Home players' scores are next to the Home players' names.  This is doubles tennis so there are two players for away and two players for home for each "line", four lines.  If you can help with this, you would make my day!!!


    Beth


    1555442703Scoresheet Snapshot.png

  • Profile Image
    denis_calin
    Answered on April 16, 2019 at 07:19 PM

    Hi Beth!

    I have modified the form created by my colleague ashwin_d. Please clone the following form to see if we are getting closer to your specifications: https://form.jotform.com/91057448493970.

    Here is a quick guide on how to clone forms: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Please let me know if you have any other questions. Thank you and have a wonderful day!

  • Profile Image
    bethe111
    Answered on April 16, 2019 at 07:35 PM

    Getting there! Can the line # column be fixed? These will never change.  And a line or space between the four lines would be great too.  The text boxes for the names just need to be tall enough for two names, one on top of the other.

    Line 1-Away

    Line 1-Home


    Line 2-Away

    Line 2-Home


    Line 3-Away

    Line 3-Home


    Line 4-Away

    Line 4-Home

         

    Thank you so much!

  • Profile Image
    bethe111
    Answered on April 16, 2019 at 07:46 PM

    I’ve added your clone to my new form - Scoresheet 2


    Scoresheet 2

  • Profile Image
    Kiran
    Answered on April 16, 2019 at 10:42 PM

    Can the line # column be fixed?

    Since the fields are setup using the configurable list widget, please note that the same fields shall be repeated on each row. However, since you have fixed number of rows already displaying in the field, it may be possible to have the specific options displayed by injecting some CSS code to the Custom CSS section of the widget.


    Please allow me sometime to work on it and get back to you with relevant information. Thank you for your patience. 

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 01:42 AM

    One more thing, I only need one winner field for every two player fields since one is the home team and one is away. Is this possible?

  • Profile Image
    Kiran
    Answered on April 17, 2019 at 02:54 AM

    Please see the cloned version of your form with added CSS code to hide some options.

    https://form.jotform.com/91058912921963

    If this is the one you are looking for you may add the below CSS code to the Custom CSS code to the widget.

    tr:nth-child(2) select > option[value='Home'], tr:nth-child(3) select > option[value='Away'], tr:nth-child(4) select > option[value='Home'], tr:nth-child(5) select > option[value='Away'], tr:nth-child(6) select > option[value='Home'], tr:nth-child(7) select > option[value='Away'], tr:nth-child(8) select > option[value='Home'], tr:nth-child(9) select > option[value='Away'] {

        display: none;

    }

    tr:nth-child(2) select > option[value='L1 Home'], tr:nth-child(2) select > option[value='L2 Away'], tr:nth-child(2) select > option[value='L2 Home'], tr:nth-child(2) select > option[value='L3 Away'], tr:nth-child(2) select > option[value='L3 Home'], tr:nth-child(2) select > option[value='L4 Away'], tr:nth-child(2) select > option[value='L4 Home'] {

        display: none;

    }

    tr:nth-child(3) select > option[value='L1 Away'], tr:nth-child(3) select > option[value='L2 Away'], tr:nth-child(3) select > option[value='L2 Home'], tr:nth-child(3) select > option[value='L3 Away'], tr:nth-child(3) select > option[value='L3 Home'], tr:nth-child(3) select > option[value='L4 Away'], tr:nth-child(3) select > option[value='L4 Home'] {

        display: none;

    tr:nth-child(4) select > option[value='L1 Away'], tr:nth-child(4) select > option[value='L1 Home'], tr:nth-child(4) select > option[value='L2 Away'], tr:nth-child(4) select > option[value='L3 Away'], tr:nth-child(4) select > option[value='L3 Home'], tr:nth-child(4) select > option[value='L4 Away'], tr:nth-child(4) select > option[value='L4 Home'] {

        display: none;

    }

    tr:nth-child(5) select > option[value='L1 Away'], tr:nth-child(5) select > option[value='L1 Home'], tr:nth-child(5) select > option[value='L2 Home'], tr:nth-child(5) select > option[value='L3 Away'], tr:nth-child(5) select > option[value='L3 Home'], tr:nth-child(5) select > option[value='L4 Away'], tr:nth-child(5) select > option[value='L4 Home'] {

        display: none;

    }

    tr:nth-child(6) select > option[value='L1 Away'], tr:nth-child(6) select > option[value='L1 Home'], tr:nth-child(6) select > option[value='L2 Away'], tr:nth-child(6) select > option[value='L2 Home'], tr:nth-child(6) select > option[value='L3 Away'], tr:nth-child(6) select > option[value='L4 Away'], tr:nth-child(6) select > option[value='L4 Home'] {

        display: none;

    }

    tr:nth-child(7) select > option[value='L1 Away'], tr:nth-child(7) select > option[value='L1 Home'], tr:nth-child(7) select > option[value='L2 Away'], tr:nth-child(7) select > option[value='L2 Home'], tr:nth-child(7) select > option[value='L3 Home'], tr:nth-child(7) select > option[value='L4 Away'], tr:nth-child(7) select > option[value='L4 Home'] {

        display: none;

    }

    tr:nth-child(8) select > option[value='L1 Away'], tr:nth-child(8) select > option[value='L1 Home'], tr:nth-child(8) select > option[value='L2 Away'], tr:nth-child(8) select > option[value='L2 Home'], tr:nth-child(8) select > option[value='L3 Away'], tr:nth-child(8) select > option[value='L3 Home'], tr:nth-child(8) select > option[value='L4 Away'] {

        display: none;

    }

    tr:nth-child(9) select > option[value='L1 Away'], tr:nth-child(9) select > option[value='L1 Home'], tr:nth-child(9) select > option[value='L2 Away'], tr:nth-child(9) select > option[value='L2 Home'], tr:nth-child(9) select > option[value='L3 Away'], tr:nth-child(9) select > option[value='L3 Home'], tr:nth-child(9) select > option[value='L4 Home'] {

        display: none;

    }

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 12:39 PM

    I've copied the CSS code above into the widget and it doesn't look any different than what I had late last night. If you see the spreadsheet snapshot I included in my 4/16 3:26pm message, I'm trying to get the Away players listed above the Home players of each "Line" and their corresponding scores NEXT to their names.  I don't need the blue boxes that appear above, just 3 separate dropdowns for each set's score. 


     (label)         (dropdown)    (textarea for the names)   (labels for dropdowns [0-7] or small text)

    L1 Winner - Away/Home      Away Players' Names         Set 1   Set 2   Set 3                                                                    

                                                 Home Players' Names        Set 1   Set 2   Set 3 


    L2 Winner - Away/Home      Away Players' Names         Set 1   Set 2   Set 3

                                                 Home Players' Names        Set 1   Set 2   Set 3


    L3 Winner - Away/Home     Away Players' Names         Set 1   Set 2   Set 3

                                                Home Players' Names        Set 1   Set 2   Set 3


    L4 Winner - Away/Home     Away Players' Names         Set 1   Set 2   Set 3

                                                Home Players' Names        Set 1   Set 2   Set 3


    This is what I would ideally like it to look like, with a little divider or space between L1 and L2, L2 and L3, L3 and L4

  • Profile Image
    Kiran
    Answered on April 17, 2019 at 01:59 PM

    As mentioned, the same fields shall be repeated in each row of the configurable list. In order to achieve your requirement, it is required to have custom CSS code to hide the unnecessary fields on each row separately that might take sometime. Let me work on it and get back to you as soon as I have update in this regard.

    Thanks!

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 03:35 PM

    Is there a better way to accomplish this than the Configurable List?  I'm open to suggestions and definitely appreciate your continued help.  I've tried a few other things, but none are very elegant or user-friendly.  You can see on my other Scoresheet Form https://form.jotform.com/91052739365158 I've tried some other formats.  Still not good choices.  

    I'll await your reply patiently.  :-)


    Beth

  • Profile Image
    denis_calin
    Answered on April 17, 2019 at 05:44 PM

    Hi Beth!

    Could you please take a look at this form I have created and see if this works better for you? I made it according to the specifications you mentioned in your previous reply. Here is the form: https://form.jotform.com/91066249077967

    Please let me know if you have any other questions. Thank you and have a great day!

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 06:00 PM

    Yes, Denis, this is very close! The first column should not include the word "winner" since we're just listing the players in each line (my mistake above).  Then each pair of players' names needs their set scores beside the names.  The Away team's scores will be next to the Away players and the Home team's scores should be next to their names.  The set scores dropdowns need to include 0 too.    

    Line 1         Players' Names          Set scores         Winner

                       Players' Names          Set Scores


    Line 2         Players' Names          Set Scores         Winner

                       Players' Names          Set Scores


    Line 3         Players' Names          Set Scores         Winner

                       Players' Names          Set Scores 


    Line 4         Players' Names          Set Scores         Winner

                       Players' Names          Set Scores        


    Thanks again for everyone's persistence and patience with my requests!

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 08:02 PM

    Please check this demo form and see if that meets your requirements.

    https://form.jotform.com/91067271602957

     Let us know how it goes.

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 08:08 PM

    Sorry the picture is so big.  Do you understand my markings?  




    1555546021E2028F10-95A1-455F-AF30-9812DF

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 08:12 PM

    You're opening the form on what device?

    The form looks good with a desktop/laptop. If the design and positioning in my screenshot is enough for you then let us know the device you're using so we can adjust it for that device.
    1555546266dekstop.png


  • Profile Image
    bethe111
    Answered on April 17, 2019 at 08:31 PM

    I was on my iPad. On my Mac, it looks like what you show. Please delete the divider line that is between the Away and Home players; there should only be a divider between Line 1 and Line 2, not between the Away and Home players.  And please remove the word winner in the first column.  




    1555547171181A6B79-C622-45E3-9C9C-3656ED

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 08:31 PM

    It will need to be mobile friendly when all is said and done. Thank you. 

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 10:02 PM

    Please check the demo form again. If there is anything you want to change please let us know now. The form needs to be customized on all mobile screen sizes to make it mobile responsive and that will take a lot of CSS code.

    We'll be waiting for your response.

  • Profile Image
    bethe111
    Answered on April 17, 2019 at 10:32 PM

    Formatting on iPad and Mac are perfect.  iPhone, not so much.  ;-)  If there is a way to optimize it for phone use, that would be ideal.

    The dropdowns need to include 0 (zero) please.   After that, I might leave you alone for the night!


    Beth

  • Profile Image
    jherwin
    Answered on April 17, 2019 at 11:38 PM

    I added 0 to the dropdown options. You can clone the form now if you want to use it or to try it out.

    Guide: How-to-Clone-an-Existing-Form-from-a-URL

    Give me more time to check if we can make it mobile responsive to iPhone. I will update you via this thread.

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 01:03 AM

    Can we get rid of the light grey check marks?

    15555637811E04A448-FC51-417A-8614-CB89F0

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 01:11 AM
  • Profile Image
    jherwin
    Answered on April 18, 2019 at 01:15 AM

    I can't see grey check marks in build mode or published mode. Please view the form and see if the grey check marks are still there.

    Also, to make the form mobile responsive in iPhones, please add the custom CSS Code below to your form:

    @media only screen and (max-device-width: 550px){
        .form-all{
            margin:auto!important;
        }
    li#id_7,#id_8,#id_9,#id_32,#id_33,#id_34,#id_14,#id_15,#id_16,#id_38,#id_39,#id_40,#id_49,#id_50,#id_51,#id_28,#id_29,#id_30,#id_46,#id_47,#id_48,#id_21,#id_22,#id_23 {
            width : 70px!important;
            margin-left : -30px;
        }
        .form-label.form-label-top {
            width : 100%!important;
        }
    #input_7,#input_8,#input_9,#input_32,#input_33,#input_34,#input_14,#input_15,#input_16,#input_38,#input_39,#input_40,#input_49,#input_50,#input_51,#input_28,#input_29,#input_30,#input_46,#input_47,#input_48,#input_21,#input_22,#input_23 {
            width : 40px!important;
        }
       div#cid_35,#cid_37,#cid_42,#cid_44 {
            margin-top : 20px!important;
            display : none!important;
        }
        .form-textarea {
            height : 50px!important;
            bottom : -15px!important;
            position : relative!important;
        }
        .form-line.form-line-column.form-col-6 {
            bottom : -80px!important;
            margin-left : 100px!important;
        }
        #id_6,#id_13,#id_20,#id_27 {
            margin-left : -20px!important;
        }
        li#id_10,#id_17,#id_24,#id_31 {
            margin-left : 40px!important;
            top : -140px!important;
        }
        #id_32,#id_33,#id_34,#id_38,#id_39,#id_40,#id_49,#id_50  ,#id_51,#id_46,#id_47,#id_48 {
            top : -140px!important;
        }
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 01:21 AM

    Do I add this code to the code that is already there or replace it with this code?

  • Profile Image
    jherwin
    Answered on April 18, 2019 at 01:22 AM

    You need to add it :)

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 01:23 AM

    The grey check marks are there when I click on any of the elements that you’ve created, in Build mode, not Publish mode. I guess I should just ignore them? Since the users won’t see them? Thanks, you’ve gone above and beyond the call of duty with my project! 

  • Profile Image
    BJoanna
    Answered on April 18, 2019 at 03:30 AM

    I do not see the gray check marks in Build mode.

    1555572441check.PNG

    I also do not see them on the live form, so your users should also not see them. 

    Feel free to contact us if you have any other issues or questions. 

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 04:05 PM

    We are so close!  Thanks you for the mobile formatting! There is still a spacing issue, please look at the attached screenshot. The Home Players’ Names header is covering up the Away Players’ Names input box.  Can that be spaced down please?


    1555617765BEBC6428-B9C8-4079-929D-60D416  

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 04:09 PM
  • Profile Image
    Welvin
    Answered on April 18, 2019 at 07:14 PM

    I have adjusted your custom CSS codes. Can you check again? 

  • Profile Image
    bethe111
    Answered on April 18, 2019 at 07:19 PM

    Those headers are good now. But the Set 3 drop downs have wrapped to the next line. Can we get them back up on the same line with Sets 1 and 2?


    1555629545F2D74D11-C30C-4703-86DE-3784AF

  • Profile Image
    jherwin
    Answered on April 18, 2019 at 09:04 PM

    Give me more time and I will fix it for you. I will update you via this thread.

  • Profile Image
    jherwin
    Answered on April 19, 2019 at 12:57 AM

    Please check your form again.

    Thanks!

  • Profile Image
    bethe111
    Answered on April 19, 2019 at 01:59 AM

    Thank you! Thank you! It looks great! You guys have been amazing to work with. 

    Beth