Configurable List - can one column be fixed text?

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!

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

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
...

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.

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

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!

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!

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

Scoresheet 2

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. 

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?

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. 

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

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!

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

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!

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!

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

https://form.jotform.com/91067271602957

 Let us know how it goes.

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

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.

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.  

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

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.

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

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.

Can we get rid of the light grey check marks?

https://form.jotform.com/91068665209160

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.

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

You need to add it :)

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! 

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

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. 

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?

  

https://form.jotform.com/91068665209160

Here's the form

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

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?

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

Please check your form again.

Thanks!

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

Beth