CSS - how to know name of attributes

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

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

1 Like

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.

2 Likes

Thanks Thinh, never thought of using inspect element before.

1 Like

Thanks both!

2 Likes

@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.) :slight_smile:

<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…

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

What am I doing wrong?

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.

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.

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

<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;
}

2 Likes

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

1 Like

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

.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;
}

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

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

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

1 Like

Does this solve the problem for you?

<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;
}
2 Likes

not really :frowning:
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 !!)

Ok I will try removing the space below each line today :sweat_smile:

Is this what you want?

<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;    
}
3 Likes

Looks like it :wink:

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