# CSS - how to know name of attributes

**URL:** <https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439>\
**Category:** Ask for Help\
**Created:** [November 12, 2021, 4:45pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439 "2021-11-12T16:45:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 12, 2021, 4:45pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/1 "2021-11-12T16:45:14Z")

</div>

Hi,

I want to try using CSS (in rich text component) but where can I find the names of the particular part I want to change.  
Suppose I want - in an inline list - change the color of the title or the color of the caption.  
The same question for all other components and their elements.

Wim

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 12, 2021, 4:57pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/2 "2021-11-12T16:57:10Z")

</div>

Hi @Wim_De_Coninck  
Hope you can find it here. Because Glide doesn’t support CSS. Use this at your own risk. Thank @ThinhDinh

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<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:** [November 12, 2021, 11:47pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/3 "2021-11-12T23:47:59Z")

</div>

Use inspect element to check the stable classes related to each component on your screen, then the rest is just trial & error to write the right CSS code to manipulate them.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 12:21am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/4 "2021-11-13T00:21:10Z")

</div>

> [@ThinhDinh](#):
>
> Use inspect element to check the stable classes related

Thanks Thinh, never thought of using inspect element before.

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 13, 2021, 6:42am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/5 "2021-11-13T06:42:34Z")

</div>

Thanks both!

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 15, 2021, 4:45pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/6 "2021-11-15T16:45:36Z")

</div>

@ThinhDinh : with the help of all the examples in Notion (and some trial and error) I got some good results; thanks.  
But I can’t left-align the values in a basic-table (I used the CSS in [Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/New-line-in-basic-table-840f6c68c1d9409cad3de1a5d5dcd6f1)) 🙂

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

.sts-row {
    height: auto !important;
    padding: 10px 0;
}

[data-test="app-simple-table"] .sts-label{
font-size: 0.7rem;
color: darkgreen;
}

[data-test="app-simple-table"] .sts-value{
font-size:0.7rem;
text-align: left;
color: darkgreen;
white-space: break-spaces;
}

```

And look at the last line (= result of a textjoin) in the attached screenshot…

 ![2021-11-15_174415](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb58ffaa36b094631b23706f4c446ae9f28729ba.png)

This only happens when the text is not wrapped over multiple lines.

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 15, 2021, 5:00pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/7 "2021-11-15T17:00:55Z")

</div>

Looks like you should try to enter the parameter width: 50%; (adjust to your needs), and or padding.  
Usually this affects the column alignment settings.

---

<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:** [November 15, 2021, 10:51pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/8 "2021-11-15T22:51:05Z")

</div>

As @Himaladin said, I would try applying a width param first on the label to see if it works. If it doesn’t please come back here so we can test again.

---

<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:** [November 15, 2021, 11:08pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/9 "2021-11-15T23:08:11Z")

</div>

Never mind, I found the workaround. It’s with the justify-content that applies to the row level.

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

.sts-row {
height: auto !important;
padding: 10px 0;
justify-content: flex-start !important;
}

[data-test="app-simple-table"] .sts-label{
font-size: 0.7rem;
width: 50%;
color: darkgreen;
}

[data-test="app-simple-table"] .sts-value{
font-size:0.7rem;
color: darkgreen;
white-space: break-spaces;
}

```

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

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 16, 2021, 7:22am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/10 "2021-11-16T07:22:46Z")

</div>

@ThinhDinh. Thanks, this was the solution. I’m happy 😀

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 25, 2021, 7:42pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/11 "2021-11-25T19:42:33Z")

</div>

In a new app, I want the rows in the table more compact; changing the height in css doesn’t help.

 ![2021-11-25_204003](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/8453f9aab60c7ae1af3db267a454ab47ae95855e.png)

> .sts-row {  
> height: auto !important;  
> }  
> [data-test=“app-simple-table”] .sts-label{  
> font-size: 0.8rem;  
> width: 40%;  
> padding: 0px 0px 0px 0px;  
> }  
> [data-test=“app-simple-table”] .sts-value{  
> font-size:0.9rem;  
> font-weight:bold;  
> padding: 1px 0;  
> color:#0088B3;  
> }

---

<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:** [November 25, 2021, 11:43pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/12 "2021-11-25T23:43:19Z")

</div>

What do you mean “more compact”? What specific height do you want to change?

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 26, 2021, 6:49am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/13 "2021-11-26T06:49:45Z")

</div>

the height of each row, but it must adapt the content in case the content has more than one line.  
I manually modified the image with Photoshop to show how I would have it.  
As said, changing the CSS (.sts-row) didn’t work (even after adding padding: 0px 0px 0px 0px;).

![Untitled-1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/8/189f02522d89940b15a849231180f4564ff34a72.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 26, 2021, 7:04am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/14 "2021-11-26T07:04:34Z")

</div>

Have you considered generating your own table using Markdown and/or HTML/CSS and displaying that in a Rich Text component?

---

<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:** [November 26, 2021, 12:10pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/15 "2021-11-26T12:10:36Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb1312b3d49e849d2ff03c2650e71f7b4807ce1a.jpeg)

Does this solve the problem for you?

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

.sts-row {
height: auto !important;
border-bottom: none;
}

[data-test="app-simple-table"] .sts-label {
font-size: 0.8rem;
width: 40%;
padding: 0px 0px 0px 0px;
}

[data-test="app-simple-table"] .sts-value {
font-size:0.9rem;
font-weight:bold;
padding: 1px 0;
color:#0088B3;
white-space: break-spaces;
text-align: right;
}

```

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 26, 2021, 2:38pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/16 "2021-11-26T14:38:39Z")

</div>

not really ☹  
There’s still a lot of white space between (under) the data-lines and the cell-divider-lines. Above the data-lines, there’s no white space (= OK !!)

---

<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:** [November 26, 2021, 11:00pm UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/17 "2021-11-26T23:00:47Z")

</div>

Ok I will try removing the space below each line today 😅

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 27, 2021, 3:31am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/18 "2021-11-27T03:31:48Z")

</div>

> [@Wim\_De\_Coninck](#):
>
> There’s still a lot of white space between (under) the data-lines and the cell-divider-lines. Above the data-lines, there’s no white space (= OK !!)

Is this what you want?

 ![Screenshot 2021-11-27 102915](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/c/9c12f5c38887d2c1829fd2328f09141d2791cb51.jpeg)

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

.sts-row {
    height: auto !important;   
    justify-content: flex-start !important;
     margin: -10px 0px -10px 0px;    
}

[data-test="app-simple-table"] .sts-label {
white-space: break-spaces;
text-align: left;
width: 50%; 
font-size: 0.9rem; 
color:white;
font-weight: bold; 
margin: 10px 0px -10px 0px;    
}

[data-test="app-simple-table"] .sts-value {
white-space: break-spaces;
width: 50%;
color:white;
text-align: right;
font-size: 0.9rem;
margin: 10px 0px -10px 0px;    
}

```

---

<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:** [November 27, 2021, 3:39am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/19 "2021-11-27T03:39:37Z")

</div>

Looks like it 😉

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [November 27, 2021, 6:26am UTC](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439/20 "2021-11-27T06:26:58Z")

</div>

Thanks for solving that quick !! 🥇  
I also tried with the margin-setting, but didn’t know that negative values could be used.

[Next page](https://community.glideapps.com/t/css-how-to-know-name-of-attributes/34439.md?page=2)