Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Separate last column in row type grid by color or border

Dear all,

I have the following problem: I want to use a grid question to have respondents evaluate the competitiveness of certain products on a scale from 1 = "very low" to 7 = "very high". Yet as not all respondents might be able to answer this question, I want to give them the chance to indicate this by checking another radio button ("Not sure"). This radio button will be number 8 - so in total it will be a scale from 1-8.

In order to separate the 8 = "Not sure" option from the actual 7-point Likert scale, I need to visually separate it. Either by a border on the left side of column 8 or by a grey shading in column 8.

I would highly appreciate if you could provide me with both solutions!

Thank you very much in advance and best regards.
asked Jul 18 by SeBo (200 points)

1 Answer

0 votes
I dug up the CSS selectors you'll want:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr:not(:first-child) > td:last-child {
    background-color: pink;
}

#[% QuestionName() %]_div .inner_table > tbody > tr:not(:first-child) > td.highlight:last-child {
    background-color: purple !important;
}

#[% QuestionName() %]_div .mobile_grid_options > :last-child {
    background-color: red;
}

#[% QuestionName() %]_div .mobile_grid_options > :last-child:hover {
    background-color: orange !important;
}

#[% QuestionName() %]_div .mobile_grid_options > .mobile_selected:last-child {
    background-color: yellow;
}
</style>


The first two selectors affect non-mobile grids; you can experiment with whether or not you want that ":not(:first-child)".  The remaining three selectors work for mobile grids.  The specific colors can be replaced with any CSS-recognized color, including hex codes.
answered Jul 18 by Zachary Platinum Sawtooth Software, Inc. (120,400 points)
...