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

  • Mike_G JotForm Support
    Replied on November 21, 2020 at 3: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.

  • Mike_G JotForm Support
    Replied on November 21, 2020 at 4: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 Screenshot 10

    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 Screenshot 21

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

  • BrightOnCapital
    Replied on November 27, 2020 at 4:16 AM

    Hi


    I did the above however it has not worked.

  • John Support Team Lead
    Replied on November 27, 2020 at 5:29 AM

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

    1606472937 5fc0d4e9acec2  Screenshot 10

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

  • BrightOnCapital
    Replied on December 4, 2020 at 2: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
    Replied on December 4, 2020 at 3: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 Screenshot 10

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

    Thank you!