CSS wont update table.

Darlington_Kasumba
Asked on November 21, 2020 at 11:14 AM

CSS wont update table.
Form https://www.jotform.com/build/202954258115051
I added css for the th but it wont take effect
Same applies for the checkboxes

This is a re-post of a comment on How to Inject Custom CSS Codes
Michael

Jotform Support

Answered on November 21, 2020 at 03:52 PM

We would like to apologize for any inconvenience. Please allow me some time to check the issue you are having on my end. I'll get back to you on this ticket with my findings as soon as possible.
Michael

Jotform Support

Answered on November 21, 2020 at 04:48 PM

I have checked the form you linked and from what I understand these are the custom CSS codes you are referring to.
/* TABLES */
th {
  font-weight: 500 !important;
  font-family: Poppins !important;
  font-size: 0.7em !important;
  color: #09090a !important;
  background: #CCEAF1 !important;
}
/* CHECKBOXES */
.checklist {
  border: 2px solid #e6ecef !important;
  }
.checklist li {
  border-top: 1px solid #e6ecef !important;
  min-height: 44px !important;
  }
.checklist label {
  color: #09090a !important;
  font-size: 0.9em !important;
  }
I have inspected the form and I only found the Spreadsheet widget, which I assume the table you are referring to.
If you are trying to customize the style of that widget, you may inject the custom CSS you have in the Custom CSS tab of the widget's settings.
Please give it a try and let us know if you need any further assistance.
BrightOnCapital
Answered on November 27, 2020 at 04:16 AM

Hi

I did the above however it has not worked.
John

Jotform Support

Answered on November 27, 2020 at 05:29 AM

The syntax for your comment is incorrect reason why the succeeding codes are not executed:
Please add '/' before "* TABLES*/" and the custom styling will be applied.
BrightOnCapital
Answered on December 04, 2020 at 02:21 AM

Hi, thanks I didn't see that I didn't copy paste it properly.
I have another issue.
Link: https://www.jotform.com/build/202954258115051#preview
In preview mode the logo shows on the side of the form on the left. It should be aligned left however at the top of the form. When I am in design mode it does show correctly, but in preview mode it changes.
The same applies on mobile, the logo is now hidden on the left when it should be at the top.
Patrick_R
Answered on December 04, 2020 at 03:35 AM

Hi! I see the issue. To fix this, simply remove the logo and then set it again (as shown in the screencast below).
I hope this helps. For any further queries, feel free to write back to us.
Thank you!