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
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.
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)
Could you give an example of how I could do this?
Thanks so much!
James
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.
Can you detail what you want for each element? I might be able to help with a details view set up.
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
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.
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).
<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.
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?
Yeah, you can apply that on the list-item level.
<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;
}
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!
That is a separator created by ::after, so just set it to display: none.
<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;
}
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!
have fun! 
Here you go. It’s tied with “navigationIcon”.
<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;
}
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?
is hard to understand your question
For each item in the list, can I set the background to be a different color, based on, maybe, a value in a spreadsheet?
yes, you need to target an nth child… use a template column to make it dynamic
How would I do that? Sorry - I don’t have much experience with this stuff.