# Is it possible to use Markdown Text in list views in my app?

**URL:** <https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564>\
**Category:** Ask for Help\
**Created:** [March 12, 2022, 7:47pm UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564 "2022-03-12T19:47:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 12, 2022, 7:47pm UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/1 "2022-03-12T19:47:32Z")

</div>

Hi All-

I’m currently making an app to display information for a list of people and am using the lists view in Glide. Is it possible to use the markdown text element somehow in the view of the list - I would like to be able to italicize and bold things that aren’t italicized / bolded by default.

Thanks!  
James

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [March 12, 2022, 8:02pm UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/2 "2022-03-12T20:02:56Z")

</div>

Not that I’m aware of. What you could do is choose a details view and add an inline list to it. Then you could use css inside of a rich text component to target the inline list.

One thing to consider is that a details view is not full screen on desktop.

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 12, 2022, 9:08pm UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/3 "2022-03-12T21:08:19Z")

</div>

How would I have a rich text target a list? I know HTML and CSS but have never tried using it in a glide app.

I tried making a new details view, added an inline list, wrote some basic HTML and selecting it to be the value. I ended up with this… (See image)

 ![Screen Shot 2022-03-12 at 4.06.47 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/624c2e54106ff359e6cf3753747bb57cb9be9297.png)

Could you give an example of how I could do this?

Thanks so much!  
James

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [March 12, 2022, 9:44pm UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/4 "2022-03-12T21:44:05Z")

</div>

My experience with css is limited so I can’t write you the exact code. Place your css inside of a rich text component on the same screen and target your inline list. Perhaps there is a way to use HTML i’m just not aware. There are many experts on here willing to lend a hand.

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641):
>
> Hi all, I’ve been starting to look into CSS usage in Glide and how we can better serve you. I would love if y’all could help me with this task by doing a few things. Give me a description of what you are using CSS for. Give me some before and after screenshots of what your CSS does. If it adds motion an movie would be amazing. If you are open to it, include your CSS snippet as an inline code block. Keep it short! I want to gather a large gallery and it will really really help me act…

> [@Code BOOK](https://community.glideapps.com/t/code-book/21993):
>
> Hi, i created an App to organize helpful links and codes In this App you can browse or post useful CSS, HTML, Scripts and Links. It is easy to copy or share them. CSS codes have a screen to test in action. You don’t have to sign in to use it. Please add some of your favorites there. let me know if any bugs or room for improvement… thank you.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 12, 2022, 11:45pm UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/5 "2022-03-12T23:45:58Z")

</div>

Can you detail what you want for each element? I might be able to help with a details view set up.

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 12:08am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/6 "2022-03-13T00:08:24Z")

</div>

Right now, I have a spreadsheet with rows of items, containing names, emails, etc. I am attempting to have the app display a list of the items, and have the user be able to click on each individual item and can see more details for each item on the list. I want to be able to change the color and bold / italicize parts of the items in the list view (eg. bold all of the first names or color the names based off of some metric).

I tried to use /Eric\_Penn 's suggestion, but I am not sure how to have something “target” something else in Glide. I do know HTML and CSS and have just tried it in Glide about an hour ago. I just don’t know how to “add an inline list to it. Then you could use css inside of a rich text component to target the inline list.”

Theoretically, I could design each list item as a rich text element in a details view, (something I have done before but with image elements instead of HTML) and manually go in and set up each details screen, but that doesn’t scale nicely and is incredibly time consuming.

Thanks in advance!  
James

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2022, 12:23am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/7 "2022-03-13T00:23:25Z")

</div>

> [@jkinsey](#):
>
> I want to be able to change the color and bold / italicize parts of the items in the list view (eg. bold all of the first names or color the names based off of some metric).

That should be doable, but you can’t target part of each element, let’s say if you want “A B” as your title and A be bold, B be italic, it wouldn’t work as far as I aware.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2022, 12:30am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/8 "2022-03-13T00:30:03Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/0/60541ea1ce3c5bdbbe721b76ba3d4696d2464507.png)

Here’s a demo for you.

Basically there’s an inline list, and a rich text component where I will insert my CSS code. That’s how we target specific elements in Glide Apps (not in Pages as of now).

```auto
<pre><span><style>

[data-test="list-item"] .textStyle {
font-weight: 600;
color: #8b0000;
}

[data-test="list-item"] .textDetailStyle {
font-style: italic;
font-size: 12px;
color: black;
}

[data-test="list-item"] .textCaptionStyle {
font-style: italic;
font-size: 12px;
}

```

You can play around with this and let me know if you have any questions.

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 1:01am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/9 "2022-03-13T01:01:19Z")

</div>

That’s really neat! I never knew you could do that! Is it possible to change the background color of each item as a whole, or apply a border radius or shadow? I know you can do this with normal rich text elements by creating divs and adding css, and was wondering if you could do that in here.

Thanks for all your help so far!

Edit: Also, I was looking at your a code a bit and had a question - what is ‘data-test’ referring to? Is this the name of the sheet?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2022, 1:07am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/10 "2022-03-13T01:07:27Z")

</div>

> [@jkinsey](#):
>
> That’s really neat! I never knew you could do that! Is it possible to change the background color of each item as a whole, or apply a border radius or shadow?

Yeah, you can apply that on the list-item level.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e170c155f7685d8b97ce6a0440c43bb71ad1caec.png)

```auto
<pre><span><style>

[data-test="list-item"] .textStyle {
font-weight: 600;
color: #8b0000;
}

[data-test="list-item"] .textDetailStyle {
font-style: italic;
font-size: 12px;
color: black;
}

[data-test="list-item"] .textCaptionStyle {
font-style: italic;
font-size: 12px;
}

[data-test="list-item"] {
background: #ffffe0;
box-shadow: 10px 10px 8px 10px #888888;
}

```

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 1:12am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/11 "2022-03-13T01:12:56Z")

</div>

This is so cool! I never knew this existed! Is it also possible to get rid of the little lines that sit between items, or would the best route be to mess with the margins so the list items cover the lines?

Thanks!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2022, 1:15am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/12 "2022-03-13T01:15:18Z")

</div>

That is a separator created by ::after, so just set it to display: none.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/77153933600e5189e5cd634c99eae09458cf3c14.png)

```auto
<pre><span><style>

[data-test="list-item"] .textStyle {
font-weight: 600;
color: #8b0000;
}

[data-test="list-item"] .textDetailStyle {
font-style: italic;
font-size: 12px;
color: black;
}

[data-test="list-item"] .textCaptionStyle {
font-style: italic;
font-size: 12px;
}

[data-test="list-item"] {
background: #ffffe0;
}

[data-test="list-item"]::after {
display: none;
}

```

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 1:17am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/13 "2022-03-13T01:17:38Z")

</div>

Ok - Last Question. Any way I can hide the little arrows? When I don’t have a caption element, the arrows show- can I use code to hide them?

Thanks so much for everything! I never knew you could do all this cool stuff with Glide!

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 13, 2022, 1:18am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/14 "2022-03-13T01:18:00Z")

</div>

have fun! 😉

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2022, 1:55am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/15 "2022-03-13T01:55:36Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a70644d84bcf5f14d6950a0c8775887fc804747.jpeg)

Here you go. It’s tied with “navigationIcon”.

```auto
<pre><span><style>

[data-test="list-item"] .textStyle {
font-weight: 600;
color: #8b0000;
}

[data-test="list-item"] .textDetailStyle {
font-style: italic;
font-size: 12px;
color: black;
}

[data-test="list-item"] .textCaptionStyle {
font-style: italic;
font-size: 12px;
}

[data-test="list-item"] {
background: #ffffe0;
box-shadow: 10px 10px 8px 10px #888888;
}

[data-test="list-item"]::after {
display: none;
}

[data-test="list-item"] .navigationIcon {
display: none;
}

```

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 2:01am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/16 "2022-03-13T02:01:07Z")

</div>

Awesome! One more quick question - is is possible to have different items have different code attributes? For example, could I add a column to my spreadsheet that has what color I want each item in the list to be?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 13, 2022, 2:56am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/17 "2022-03-13T02:56:31Z")

</div>

is hard to understand your question

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 2:56am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/18 "2022-03-13T02:56:54Z")

</div>

For each item in the list, can I set the background to be a different color, based on, maybe, a value in a spreadsheet?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 13, 2022, 2:57am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/19 "2022-03-13T02:57:47Z")

</div>

yes, you need to target an nth child… use a template column to make it dynamic

---

<div class="post-metadata">

**Author:** ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)\
**Post date:** [March 13, 2022, 2:59am UTC](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564/20 "2022-03-13T02:59:58Z")

</div>

How would I do that? Sorry - I don’t have much experience with this stuff.

[Next page](https://community.glideapps.com/t/is-it-possible-to-use-markdown-text-in-list-views-in-my-app/39564.md?page=2)