CSS for hiding stuff!

Hi, it’s a combination of form button and floating CSS as you can see here.

The CSS code to put in a rich text component is:

<pre><span><style>
.sc-euEtjk {position:fixed;
	         width:60px;
	         height:60px;
	         bottom:15%;
	         right:2%;
	         border-radius:40px;
	         text-align:center;
	         box-shadow: 2px 2px 4px #999;
         font-size:40px;
         font-weight: bold;}
</style></span></pre>
7 Likes

Ah, I see

:man_facepalming: I’m a bit stupid today…

1 Like

Thank you @ThinhDinh. I think I understand the CSS part now but what is “.sc-euEtjk”? Is this the components code?

This combined inside a Rich Text component only works in Details page configuration, correct?

That is the class name. If that gets changed, then your features using that class will break. This is generally why using rich text is not recommended.

Yes.

1 Like

Like what Pablo said above, the class name is tied to that button component and I’m using that CSS code to adjust how it is displayed. Glide doesn’t offficially support this as any new changes brings a new class name so you have to change it.

1 Like

@Pablo_books @ThinhDinh @ehdubya. Robert had come up with a better way to handle classes for buttons without having to specify the class name.

I use that method now, but for my dual floating button setup, I still have to mess with class names.

4 Likes

I did find that you can target components that are “next in line” by using +.

<pre><span><style>
.timer-container + * {
display: none;
}

eg. removes the stop and play button from the stopwatch.

9 Likes

Thank you again @Pablo_books, @ThinhDinh, @Jeff_Hager and @Robert_Petitto for your help! Much appreciated! Back to the lab! :nerd_face:

4 Likes

THIS is very helpful ---- I’ve started hiding the back button and building a “cancel” button that has actions attached to it. The action clears some user-specific values so that when the user cancels the process, it clears their previous entries. This makes this specific process much more intuitive and prevents certain errors from occurring.

9 Likes

Same. Sometimes I want users to go straight to a screen using a deep link, which serves as some kind of a “landing page”. The back button would kill the purpose, so this is helpful.

4 Likes

haha, snap! :joy:

2 Likes

It would be nice to have additional ‘back’ actions.

@ThinhDinh,

I know you posted a CSS to make the picture go all the way up on the screen. I have been trying to find it but I can’t. Is it possible that you share it one more time?

Thanks.

1 Like

Hi @SantiagoPerez, here it is.

<p>
<a style="position: absolute; width:100%; top: -105px; right: 0%; z-index:-2; opacity: 1" target="_blank" rel="noopener"></a>
</p>
<a style="position: absolute; width:100%; top: -105px; right: 0%; z-index:-2; opacity: 1" target="_blank" rel="noopener">
<div style="background: linear-gradient(to top, #282828 25%, #787878 75%); margin: 0%; padding-bottom:400px;"></div>
</a>
<p>
<a style="position: absolute; width: auto; top: -105px; right: 0%; z-index:-1; opacity: 0.5;" target="_blank" rel="noopener">
<img style="object-fit: cover;" height="400" src="{I}">
</a>
</p>
<center>
6 Likes

Thanks man!

1 Like

Hey man!
Do we have a working background image CSS? The one I have seems to only work on the editor but not on production.

Thanks

Here you are.

<a style="position: fixed; 
width: 100%; 
top:20px;
right: 0%; 
z-index:-1;
" target="_blank" rel="noopener">

<img src="https://dummyimage.com/600x2000/000/000" title="" style="">
5 Likes

Just found out I can rename my bookmarks in this forum :man_facepalming:

5 Likes

I just found that out too. Also, was there always a do not disturb feature?
image

Hi, can I use this to hide the download button in a podcast app?
Thanks in advance :slight_smile: