Need your advice on formatting matrix fields.

i am getting quite close to being done w getting my template form perfect - need you advice on formatting fields

 

how do i change the background colors of the fields to make the input of data more intuitive

for example for field Resident: Global Surgery Skills (1-4)

==

how to change the code so that 

Resident: Global Surgery Skills (1-4)  and Attending: Global Surgery Skills (1-4)

are side by side

===

what is the code to get fields like

Resident: skill level I showed

have the text on one line

 

==

field PGY  to be to the right of the name field it is now on top of

 

thanks

max

You will have to inject the following custom CSS codes to your form to change the colors/widths:

For the Row Header background and border:

.form-matrix-row-headers {

    border: 1px solid #f5f5f5 !important;

    background: #589F76 !important;

    color: #F5F5F5 !important;

}

 

For the Column Header background and border:

.form-matrix-column-headers {

    border: 1px solid #f5f5f5 !important;

    background: #589F76 !important;

    min-width: 70px !important;

    color: #F5F5F5 !important;

}

 

For the radio button background and border:

.form-matrix-values {

    border: 1px solid #f5f5f5 !important;

    background: #589F76 !important;

}

 

Here's how to inject the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

Adjust the colors to suit your needs.

works
but what code to make the color
Resident: Global Surgery Skills (1-4)
diferent from
attending Global Surgery Skills (1-4)
max
...

If you want to color them differently, you can add the following code to target those two fields by their ID:

First two matrices:

#cid_172 th.form-matrix-row-headers {
    border : 1px solid #f5f5f5 !important;
    background : blue !important;
    color : #F5F5F5 !important;
}

#cid_172 td.form-matrix-values {
    border : 1px solid #f5f5f5 !important;
    background : blue !important;
}

#cid_172 th.form-matrix-column-headers {
    border : 1px solid #f5f5f5 !important;
    background : blue !important;
    min-width : 70px !important;
    color : #F5F5F5 !important;
}

#cid_182 th.form-matrix-row-headers {
    border : 1px solid #f5f5f5 !important;
    background : #589F76 !important;
    color : #F5F5F5 !important;
}

#cid_182 td.form-matrix-values {
    border : 1px solid #f5f5f5 !important;
    background : #589F76 !important;
}

#cid_182 th.form-matrix-column-headers {
    border : 1px solid #f5f5f5 !important;
    background : #589F76 !important;
    min-width : 70px !important;
    color : #F5F5F5 !important;
}

Second two matrices:

#cid_153 th.form-matrix-row-headers {
    border : 1px solid #f5f5f5 !important;
    background : blue !important;
    color : #F5F5F5 !important;
}

#cid_153 td.form-matrix-values {
    border : 1px solid #f5f5f5 !important;
    background : blue !important;
}

#cid_153 th.form-matrix-column-headers {
    border : 1px solid #f5f5f5 !important;
    background : blue !important;
    min-width : 70px !important;
    color : #F5F5F5 !important;
}

#cid_183 th.form-matrix-row-headers {
    border : 1px solid #f5f5f5 !important;
    background : #589F76 !important;
    color : #F5F5F5 !important;
}

#cid_183 td.form-matrix-values {
    border : 1px solid #f5f5f5 !important;
    background : #589F76 !important;
}

#cid_183 th.form-matrix-column-headers {
    border : 1px solid #f5f5f5 !important;
    background : #589F76 !important;
    min-width : 70px !important;
    color : #F5F5F5 !important;
}

Here is my test copy with the code added:

https://form.jotform.com/62575724715967

 

 

your advice is clearly on target
but i mis-spoke
what i realize now, i was attempting to accomplish is to have "background"
as a set for input fields
resident fields bffbd2 pale green
attending fields ccd2ce gray
matrix would be just fine as white
i think i messed it up and have been struggling with this for too long to
get it right
would you please guide me to accomplish the above goals
also i was looking to have the fields
such as
Resident: % case I did
...

Could you confirm if the image below correctly shows what you would like to happen to the style of the matrices in your form?

If, in any case, I have misunderstood your concern, please feel free to get back to us with more details.

Also, regarding the field "Resident: % case I did", what exactly would you like to happen to the style of that field?

We will wait for your response. Thank you.

matrix fields to appear as in field
resident self asses (top image)
and background colors for fields
resident fields bffbd2 pale green
attending fields ccd2ce gray
i think i messed it up and have been struggling with this for too long to
get it right
would you please guide me to accomplish the above goals
also i was looking to have the fields %case , complexity, skill shown
such as
Resident: % case I did
to be on "one line"
and the back ground colors
resident fields bffbd2 pale green
attending fields ccd2ce gray
thanks
m
...

I apologize for I am having difficulty understanding your latest response/question.

Can you please reiterate.

Try numbering also what are needed so we can easily identify them.

We will wait for your updated response.

 

Let's do one at a time
matrix fields to appear as in field
resident self asses (top image
m
...

I would like to apologize but, can you help us by further explaining what you mean by "matrix fields to appear as in field"?

If you can explain it with the help of screenshots, then that would be greatly appreciated. To learn how to include screenshots in your replies here in the support forum, I suggest you check out this thread: How-to-include-screenshot-image-in-the-support-forum

Thank you.

i think i am going to revise and lower my goals for this form as it appears
my puter skills are less than needed
i make a change somewhere, and something else is kilter
so if you could please help me with the below
i should be good to go
tx
m\
Background for
Resident: self-assess the global surgery skills you showed
to appear also for
Resident: self-assess the surgery skills you showed
I don’t see these fields in designer
Attending: show which of your assessments differ from those of your
Resident's above
Attending: show which of your assessments differ from those of your
Resident's above
Form boder on top is now gray steel color
can we have this color be the same as rest of form
Can I apply the same colors of
Attending: show which of your assessments differ from those of your
Resident's above
Attending: show which of your assessments differ from those of your
Resident's above
...

Let me know if this is what you need:

 

1) You want to apply the matrix field's background called "Resident: self-assess the global surgery skills you showed" on the matrix field called "Resident: self-assess the surgery skills you showed"

If that is correct, please inject the following code:

#cid_190 

    #cid_190 th.form-matrix-row-headers {

    border : 1px solid #bffbd2 !important;

    background : green !important;

    color : #Fbffbd2 !important;

}

 

#cid_190 td.form-matrix-values {

    border : 1px solid #f5f5f5 !important;

    background : green !important;

    color : #93d76b;

}

 

#cid_190 th.form-matrix-column-headers {

    border : 1px solid #bffbd2 !important;

    background : green !important;

    min-width : 70px !important;

    color : #bffbd2 !important;

}

 

#label_190 {

    background : #d3fcba;

}

 

#cid_190 {

    background : #d3fcba;

}

Result:

 

2) Are you wondering why the fields called,

-Attending: show which of your assessments differ from those of your Resident's above

and

-Attending: show which of your assessments differ from those of your Resident's above

are not showing in the designer?

If you are, the reason is the conditions you have setup. The fields are conditioned to show if certain selection is made, otherwise, they will remain hidden.

If you need to style these fields, you first need to temporally disable the conditions, in that way the fields will show in the designer:

After you are done styling, you can enable the conditions again.

 

3) I believe you want to remove the grey color at the top of your form:

Please inject the following code:

.form-all{

    background: #c7f2cf !important;

}

Result:

 

4) The fields called,

-Attending: show which of your assessments differ from those of your Resident's above

and

-Attending: show which of your assessments differ from those of your Resident's above

appear to have the same style.

Do you want them to have the same style as the fields called:

-"Resident: self-assess the global surgery skills you showed"

and

"Resident: self-assess the surgery skills you showed"?

 

Here is my version of your form with the applied changes: https://form.jotform.com/62615582749971 

You may clone it if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

Hope this helps.

you guys respond fast
but, i need this soon done, so i tried again and have the form closer (not
sure why some of the features are working now, and not before)
i will leave this form alone until i hear back from you
would you please advise:
the -2- field labels Attending: show which of your assessments differ from
those of your Resident's above
#input _187
#input _188
have the same background color as the background color of the form (mint
green)
AND
Resident: self-assess the global surgery skills you showed
input 172
(this one looks correct in builder but not designer)
Resident: self-assess the surgery skills you showed
input 190
show the same background color as the text labels for those fields (pale
green)
AND
pale green background colors for
#input_174 & #input_180
i was able to have this viewed in designer correctly, but does not show up
that way in builder
thanks for your patience
m
...

I am sorry, but I am having a hard time understanding what you need. Please upload screenshots to point out what you need to accomplish. 

1) Load the link of this thread in your browser: https://www.jotform.com/answers/932301 

2) Upload the screenshots where you have pointed out the changes  you need to make: https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum 

Please re-read my email
I've given you the input fields and the desire to effect
pls state what's confusing thanks
m
...

If I understand correctly, you want the field titled " Attending: show which of your assessments differ from those of your Resident's above" to have a background color of mint green (same color as form)? If that is so, please inject the custom css below:

#cid_187, #label_187 {

    background: #c7f2cf !important;

}

#cid_188, #label_188 {

    background: #c7f2cf !important;

}

Then you want the field titled "Resident: self-assess the global surgery skills you showed" to have the background color to be the same pale green color as the labels inside the matrix. Please inject the code below:

#cid_190, #label_190 {

    background: #589F76 !important;

}

#cid_172, #label_172 {

    background: #589F76 !important;

}

And you want the fields 174 and 180 to have pale green color. Inject the codes below to achieve this.

#cid_174, #label_174 {

    background: #589F76 !important;

    width: 210px;

 

}

#cid_180, #label_180 {

    background: #589F76 !important;

    width: 210px;

 

}

If you need to change the colors for any of the fields mentioned above, simply replace the yellow highlighted text in the code provided with the color that you want to show.

If you need further modifications or adjustments made, please let us know. Regards.

thanks
w your suggestions and a few keystrokes on my part i got this done in 10min
and makes me feel silly to have wasted so much time with this.
you may want to consder a seperate layer of customer support w live chat
(would be glad to pay for the option) for people like me with some skills
for puters, but web lingo is a different beast
thanks
m
...

Hi,

Glad to hear you had this done. You are welcome and thanks for your suggestion. Actually, we do also sometimes activate chat support but we spend more time in answering threads in this forum. The advantage of this is that we can organize our answers in a way that can be easily followed by users.

If you need further assistance, do let us know. 

Regards.

Great
So if I would like chat support for a future issue how would I initiate it?
m
...

We rarely open chat due to our forums being top priority.  If chat is open, there will be a pop-up on the JotForm site to initiate it.

ok
m
...