CSS wont update table.

  • Profile Image
    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

  • Profile Image
    Mike_G
    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.

  • Profile Image
    Mike_G
    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.

    1605992602_5fb9809ababb0_zt201121_160205

    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.

    1605992750_5fb9812eb61ce_zt201121_160519

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    Darlington_Kasumba
    Answered on November 27, 2020 at 04:16 AM

    Hi


    I did the above however it has not worked.

  • Profile Image
    JohnRex
    Answered on November 27, 2020 at 05:29 AM

    The syntax for your comment is incorrect reason why the succeeding codes are not executed:

    1606472937_5fc0d4e9acec2_

    Please add '/' before "* TABLES*/" and the custom styling will be applied.

  • Profile Image
    Darlington_Kasumba
    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.

  • Profile Image
    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).

    1607070888_5fc9f4a828d11_Screencast 2020

    I hope this helps. For any further queries, feel free to write back to us.

    Thank you!