# Representing check box data with an icon

**URL:** <https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309>\
**Category:** Get Answers\
**Created:** [December 6, 2024, 10:42am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309 "2024-12-06T10:42:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 6, 2024, 10:42am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/1 "2024-12-06T10:42:57Z")

</div>

Hello all,

I have a field in our app (several, tbh) where we are storing the data as a simple choice of three, lets say NO, SOME, YES. Then later we want to be able to show this choice in a grid column, but with three different icons, Thumbs Up, Thumbs Down, Smiley face etc. rather than the text data. I’ve bashed my head against the wall a bit, but can’t think of how I’d do it. Any ideas.?

Thanks for looking

Neil

---

<div class="post-metadata">

**Author:** ![Hugo](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hugo/32/4068_2.png) [@Hugo](https://forums.knack.com/u/Hugo)\
**Post date:** [December 6, 2024, 10:58am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/2 "2024-12-06T10:58:22Z")

</div>

Hi Neil,

you can do this with display rules in the column settings for that table. They would look a bit like this, but three rule for the 3 options:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/5/59afade1257bf76e037b73ceb0067e98364e9263.png)

Cheers

Hugo

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 6, 2024, 11:51am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/3 "2024-12-06T11:51:48Z")

</div>

Hi Hugo, yes, of course you can do it like this, and I feel a bit silly for not thinking about it and from that side. Appreciate the help.

---

<div class="post-metadata">

**Author:** ![Hugo](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hugo/32/4068_2.png) [@Hugo](https://forums.knack.com/u/Hugo)\
**Post date:** [December 6, 2024, 12:18pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/4 "2024-12-06T12:18:46Z")

</div>

Not at all, you’re welcome!

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 7, 2024, 9:42am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/5 "2024-12-07T09:42:48Z")

</div>

Sorry, need a bit more help. I’ve just tried this method, and I’m finding an issue with ‘Hide Value’ which appears to hide the icon I want to use as well as the textual version of the option in the grid column. I get any background colour formatting I’ve set, but as soon as I ‘hide value’ the icon goes with it. Any thoughts.?

 ![screenshot-builder.knack.com-2024.12.08-16_11_26](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/3/39003c7a970d2716dcca3af91d62b338a4471d98.png)  
 ![screenshot-lovelybuffet.knack.com-2024.12.08-16_13_03](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/6/67ed8a2ef1c05862196d0e7eb5bedb0355d76f36.png)

Top one is in the builder, bottom one in the app…

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [December 8, 2024, 10:41pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/6 "2024-12-08T22:41:04Z")

</div>

I’m not sure I completely understand your specific implementation but the below video I created three years ago may provide some inspiration 🤔

[![](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/1/122e673483a1aa018224bd86a5ea67042b5a45cf.jpeg "Display Icon without Value - Knack Database") ](https://www.youtube.com/watch?v=8nSc1RdMYXA)

Feel free to reach out to me via DM if you’d like to connect.

Like my good friend Hugo, I’m in the U.K.

---

<div class="post-metadata">

**Author:** ![Hugo](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/hugo/32/4068_2.png) [@Hugo](https://forums.knack.com/u/Hugo)\
**Post date:** [December 9, 2024, 6:36am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/7 "2024-12-09T06:36:37Z")

</div>

Cheers Carl. Another thing that might not be referenced in the video are the link design settings (under the display rules etc). Play around with them but I think the icon doesn’t always appear if set to Legacy. Try setting them like this and see if it helps.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/6/64f864360f05e65fa4401e553cddf7e47508e39e.png)  
Hugo

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 9, 2024, 10:05am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/8 "2024-12-09T10:05:39Z")

</div>

Morning Carl, You saw our app a few months back, so you’ll recall we have a lot of columns on display in our main pages. It’s currently 17, but I need to add 5 more. Unsurprisingly, the page is becoming hard to zoom in to something readable where I can see the whole grid. So, I kind of recalled that we could maybe display representative icons instead of textual data. With thoughts of hopefully reducing some columns to small and easier to understand I naively imagined that it could be done without having to invoke lots of workarounds. I can see I was over-optimistic. It’s no problem. I thought that might improve something for us on our live app, but hey-ho. I’ll just park it up for now and maybe come back to it another time. .

Appreciate your help Gents, but let’s leave this one here for now.

---

<div class="post-metadata">

**Author:** ![Tyler1](https://avatars.discourse-cdn.com/v4/letter/t/13edae/32.png) [@Tyler1](https://forums.knack.com/u/Tyler1)\
**Post date:** [December 13, 2024, 1:08pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/9 "2024-12-13T13:08:45Z")

</div>

Hey Neil,

You can accomplish this by just creating another blank text field called something like icon display. Then, you can display your new blank icon field in the table and created a display rule that references the original choice field and show whatever icon you want. I can share an example if that would help.

Tyler

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [December 13, 2024, 4:19pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/10 "2024-12-13T16:19:05Z")

</div>

Hi @Tyler1 - agreed, that’s what I covered in the video. 👍

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 13, 2024, 4:31pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/11 "2024-12-13T16:31:19Z")

</div>

Hello Tyler,

Thanks for the response. I think this is the same method that Carl showed me in one of his video’s. I’m going to put this on my list for some app updates over the Christmas holidays, and see where we go with it. My main table is 82 fields now, with quite a few workaround fields for transforming something into something else. Its getting a bit unwieldy from a maintenance point of view, and I was hoping not to have to do this. Our app allows us to run our business, and I have no intention of being an ‘expert builder’ even though we’ve been doing this since 2016. I’ll see what I can come up with. Appreciate the help.

Neil

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [December 13, 2024, 4:53pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/12 "2024-12-13T16:53:15Z")

</div>

Wow 😮 there must be a lot of horizontal scrolling going on with so many columns. 👨‍💻

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 13, 2024, 5:17pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/13 "2024-12-13T17:17:26Z")

</div>

I only show about 20 at a time, but we use big wide screens and take the zoom down to 80%. Anything that we can do to reduce a column to a single character is worth trying.!

Neil

---

<div class="post-metadata">

**Author:** ![Tyler1](https://avatars.discourse-cdn.com/v4/letter/t/13edae/32.png) [@Tyler1](https://forums.knack.com/u/Tyler1)\
**Post date:** [December 13, 2024, 5:22pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/14 "2024-12-13T17:22:35Z")

</div>

I should have watched the video first! Agreed, its not a perfect solution to add more fields. I have a couple tables that have \>100 fields 😬… kind of snuck up on me. I try to just bury those at the end and name them appropriately so they’re out of sight, out of mind.

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [December 13, 2024, 5:50pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/15 "2024-12-13T17:50:11Z")

</div>

@NeilParkin60970 - not sure if you’ve explored changing the font size by view or scene with CSS.  
That way you can keep your browser at 100%. Every little helps 🙂

```auto
/* Clients Table Font Size */
#view_4 {
    font-size: 8px; /* Adjust the font size */
}

```

```auto
/* Clients Page Font Size */
#kn-scene_3 {
    font-size: 8px; /* Adjust the font size */
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/f/fab73c88e958a1183b5709ecf3bab915fe757b41.png)

If you’re a Windows user and your tables have horizontal scrolling, you can use SHIFT and the scroll wheel.

 ![Pro Tip](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/9/9c0cf4221f46d6670df20e61ad6959656438570f.jpeg)

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 13, 2024, 6:23pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/16 "2024-12-13T18:23:35Z")

</div>

Thats useful Carl. THanks.

Being a food business, I am keen to keep fingers off keyboards and mice as much as we possibly can.  
We’ve experimented with touch screen monitors too, but with mixed results as the points of touch are pretty small.  
I also don’t want to have staff changing screens or viewing pop-up detail windows etc. One screen, everything visible, no scrolling. Thats my objective really.

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [December 13, 2024, 7:02pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/17 "2024-12-13T19:02:31Z")

</div>

Glad that the CSS might be useful. 👍

---

<div class="post-metadata">

**Author:** ![NeilParkin60970](https://avatars.discourse-cdn.com/v4/letter/n/47e85d/32.png) [@NeilParkin60970](https://forums.knack.com/u/NeilParkin60970)\
**Post date:** [December 14, 2024, 9:22am UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/18 "2024-12-14T09:22:52Z")

</div>

Here is another thought, and another little challenge for the CSS wizards.

I was thinking that if I can get the data down to an icon, but not the column title which may still be several characters. If I was doing this in Excel, I would format the title row with a -45deg or a 90deg alignment, like this…

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/4/41d9fafe6a5675404f13a76d877c8163885c0ff5.png)

We use sticky headers, but how about transformed headers.?

Thanks in hope and anticipation. Neil

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [December 14, 2024, 6:01pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/19 "2024-12-14T18:01:17Z")

</div>

@NeilParkin60970 - As you know, I’m not a coder, but I have included the snippet below, which I have used in the past to create a vertical column heading. You need to add this to the CSS section, and then you can reference the class and label name directly in the column header.

Add this to CSS

```auto
/* Vertical Text */
.clVertical {
  writing-mode: vertical-rl;
  padding: 4px;
}

```

Add this to the Column Properties Header

```auto
<span class="clVertical">ID Number</span>

```

 ![Vertical](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/3/303be86ae1aaaeef3d93328f12e684f068f3ecd1.jpeg)

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [December 15, 2024, 8:59pm UTC](https://forums.knack.com/t/representing-check-box-data-with-an-icon/18309/20 "2024-12-15T20:59:34Z")

</div>

I like that.

And it wouldn’t take much to make it at a 45° angle I’ll get back to you on that tomorrow.

To apply that to all headers in the table you could do this:

```auto
#view_123 thead tr th{
    writing-mode: vertical-rl;
    padding: 4px;
}

```

Craig