I see your curly braces are not correct. The curly braces are needed to enclose all the parameters.
<pre><span><style>
[data-test="tile-item"] .tile-overlay { background: none;
height: 45px !important; color: black;
}
Thanks, but that didn’t work either. These tiles refuse to shrink 
Talking about shrinking, any ideas how to remove (or at least shrink) this huge white space generated by the Rich Text component?
It has to be visible to take effect, but it’s generating almost a full empty screen until you reach these three dots as you can see below…
This could be a clue why your CSS doesn’t work. CSS in a rich text component should have a very minimal effect as far as the extra white space. At most, it’s only a few pixels in height. Usually I throw it after all other components on the screen so that few extra pixels of white space are at the bottom. If you have those three characters (which look like a Grave accent - Wikipedia), along with a bunch of white space, then it appears that you have much more than just the CSS in your rich text component.
Can you show a screenshot of your rich text component configuration?
1 Like
Yeah, I figured that my “collection” of tweaks will become too much. I have it to struggle with this crazy RTL issues…
BTW - I got it to shrink the tile height by removing the code suggested by the great @Darren_Murphy:
So now I cannot control the tile color, but I can control its height
Kept the best for last. Don’t laugh, here it is:
<pre><span><style>
[data-test="tile-item"] .tile-image-area >div {
height: 45px !important;
}
<p><style>
[data-test="glide-app-bar"]
{text-align: center;
direction:rtl;
}
</style></p>
<p><style>
[data-test="app-text-box"] {
text-align: start;
direction:rtl;
}
</style></p>
<p><style>
[data-test="app-checkbox-list-item"] {
text-align: start;
direction:rtl;
}
</style></p>
<p><style>
[class="sc-jxTFzB ktDwEE"] {
text-align:right;
direction:ltr;
}
</style></p>
<p><style>
[class="legend-item"] {
text-align:right;
direction:ltr;
}
</style></p>
<p><style>
[class="sc-jLfdbx kUyBQb"] {
text-align: start;
direction:rtl;
}
</style></p>
<p><style>
[data-test="app-hint"] {
text-align: start;
direction:rtl;
}
</style></p>
<p><style>
[data-test="app-switch-view"] {
text-align: start;
direction:rtl !important;
}
</style></p>
<p><style>
[data-test="app-text-field"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[data-test="app-picker-button"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[data-test="app-switch-view"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[data-test="list-item-title"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[data-test="list-item"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[class="sc-kNnYhR WdOSc"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>
<p><style>
[data-test="app-inline-picker"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[role="row"] {
text-align: right;
direction:rtl;
}
</style></p>
<p><style>
[class="sc-htmbXw fgLAlN"] {
text-align: right;
direction:rtl !important;
}
</style></p>
<p><style>
[data-test="app-vertical-list"] {
text-align: right;
direction:rtl !important;
}
</style></p>
<p><style>
[class="label"] {
text-align: right;
direction:rtl !important;
}
</style></p>
<p><style>
[class="tbs-inner"] {
text-align: right;
direction:rtl !IMPORTANT;
}
</style></p>
For starters, you have a bunch of paragraph and style tags. You shouldn’t need any html tags other than the initial <pre><span><style> tags. I think all of those paragraph tags are definitely going to add a whole lot of white space.
I’m not seeing anything that would cause the extra characters at the bottom, unless you have a different component that those are coming from, or you didn’t paste your entire contents of your rich text into your post.
2 Likes
Adding to what Jeff said, you also have a couple of unstable class names in there.
<p><style>
[class="sc-jxTFzB ktDwEE"] {
text-align:right;
direction:ltr;
}
You should never use this since it can change anytime.
1 Like
Comparison of CSS like a wife. First, you will fall in love with its abilities and beauty. Later you will be dizzy or annoyed and need the patience to deal with it. Finally, you can not let go anymore.
This is what @Eric_Penn is figuring out. Here only @ThinhDinh has great patience. 
Just a joke, don’t be mad…
4 Likes
That’s solved it. We newbies are quite funny… or perhaps some harsher words…
1 Like
May I ask what does this mean? What will generate such a change?
As you are aware Glide has a lot of Native elements that look nice and work well across all devices. CSS is a workaround to change these elements. Glide does not officially support CSS. Glide may change class names at any time (breaking your App/ CSS)
The best thing you can do is to try and use stable class names, as those are less likely to be changed by Glide in the future.
2 Likes
When I started using CSS with Glide I also used those same “random” class names and I got into big trouble with it.
Back then, I noticed everytime they push the updates out, it changes. I’m not sure it’s still the case nowadays, regarding the timing, not about the fact that it changes, I’m pretty sure it still does.
Secondly, those are different for different OS (Android/iOS etc), You have to take into account every single one of them, and it’s not ideal.
Please always work with the stable class names only.
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.