how can i add text to a multi select grid

  • Profile Image
    Bavington
    Asked on January 26, 2016 at 12:56 PM
  • Profile Image
    david
    Answered on January 26, 2016 at 04:13 PM

    I believe this thread contains the information you are looking for:

    http://www.jotform.com/answers/672435-Can-a-Multi-select-Grid-have-cell-text

    Both possible workarounds described within should be able to meet your requirements.

  • Profile Image
    Bavington
    Answered on January 28, 2016 at 05:18 PM

    1. What are the steps for adding text to the multi-select grid widget , the link you provided only states it an option but there aren't any detail instruction on how to add text using CSS. pleases attach a link to those instructions or CSS Code.

    2. I am having difficulty following the instructions on how to add text to the Grid , i have attempted to follow the process right up to the conditional logic portion of the screen. I have attempted to duplicate the screenshot of the conditions wizard and can not seem to find that screen I keep getting the conditions screen but none of those screens allows for text , so please clarify if i am missing a step or if that screen has been removed ?

  • Profile Image
    david
    Answered on January 28, 2016 at 07:10 PM

    For adding the text to the Grid, you need to target the specific grid location.  For example:

    #cid_3 > table > tbody > tr:nth-child(2) > td:nth-child(2):before {
        content : "January 1: Text Here";
    }

    Would target the table row 2, table column 2 and add the content "January 1: Text Here"

    To target the cell below it, you would use this code:

    #cid_3 > table > tbody > tr:nth-child(3) > td:nth-child(2):before {
        content : "January 2: Text Here";
    }

    Here would be the test form with that code added:

    https://form.jotform.com/60277125905960

    Similarly, in the custom CSS portion of the multi select grid, you can add this CSS:

    #tablegrid > tbody > tr:nth-child(2) > td:nth-child(2):after {
    content: "Text here";
    }

    Changing the the row/column number for each additional entry.