Input table: how to show checkboxes as buttons?

  • ZeshanHaider
    Asked on July 12, 2018 at 4:01 PM

    The table at the end of form is pretty tight (specially on mobile). I want it easy to click.

    Is it possible make the whole thing a button?


    What should I do?

  • Victoria_K
    Replied on July 12, 2018 at 4:11 PM

    Hello,

    This should be able to achieve with custom css code. 

    I will check for possible options and will get back to you with result.

  • 3chairs
    Replied on July 13, 2018 at 12:22 AM

    waiting for your kind reply

  • Kiran Support Team Lead
    Replied on July 13, 2018 at 2:32 AM

    Our colleague must be working on a possible solution. As soon as she any news with this, you'll be updated here on this thread.

    Thank you for your patience and understanding.

  • Victoria_K
    Replied on July 13, 2018 at 6:01 PM

    Hello,

    Would this buttons be suitable for your form?

    1531518829screencast55 Screenshot 10

    If yes, please use the following code:

    .form-matrix-values input:after  {  

        width: 3em;

        height: 1.3em;

        text-align:center;

        padding:3px 0px;

        display:block;

        content: " ";

        position: relative;

        top: -0.7em;

        left: -1.2em;

        background-color: #eee;

        -webkit-box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

       -moz-box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

            box-shadow: 0 -10px 29px 0 rgba(0, 0, 0, 0.25);

            border: 2px solid #999;

            border-radius: 5px;

      -webkit-transition-property: background-color; /* Safari */

        -webkit-transition-duration: 1s; /* Safari */

        transition-property: background-color;

        transition-duration: 1s;

    }

    .form-matrix-values input:checked:after {

        background-color: #999;

    }

    .form-matrix-values {

      width: 3em;

      height: 1.5em !important;

    }

    Related guide: How-to-Inject-Custom-CSS-Codes

    Test form: https://form.jotform.com/81926697226974 

  • ZeshanHaider
    Replied on July 14, 2018 at 12:44 AM

    Yeah. This looks so cool!