CSS for hiding stuff!

Tutorials
#1

Hey guys!!

I recently started experimenting with CSS. I didn’t really like the back button when using link to screen in the onboarding process.
But guess what! After learning, researching and inspecting, I know the Rich Text!

Hide back button:

<pre><span><style> [data-test="back-button"]{ display: none }

Hide edit pencil

<pre><span><style> [data-test="nav-button-Edit"]{display: none}

Hide the entire top part/header

<pre><span><style> [data-test="glide-app-bar"]{display: none}

Hide Hamburger menu icon thingamajig!

<pre><span><style> [data-test="nav-button-menu"]{display: none}

Annnd… If you remember, we still don’t have conditions for adding items, so here’s your solution:

<pre><span><style> [data-test="nav-button-Add"]{display: none}
/* Suggested: Create a visibility condition for when you don't want users to add items
8 Likes
Enhancement when switching tabs
#2

I just realized that if you have rich text, then you can’t be in list view, which means that the add button cannot be hidden…
:man_facepalming:

1 Like
#3

We can edit the CSS and HTML?

#4

You can place it in a rich text component

#5

I see…hmmmm…

#6

Just use a form button, ideally a floating one then hide it based on conditional visibility.

1 Like
#7

Right, but you can’t add components in list/tiles/cards/etc view

#8

I mean in a details view. As you have found out the CSS thing only works in details view.

1 Like
#9

Correct, but there’s no add button there.

In other words: the CSS for the add button cannot be used as it cannot be placed in a rich component because lists can’t have components they can only have row items and you can’t add rich text in a row item.

:sweat_smile: Well that was a run-on sentence

#10

Yeah that’s why I recommended a floating “add” button in a details view.

#11

Ah, you mean inside a list item? So you click the item and a floating button appears?

#12

No, I mean you show the items in an inline list, then add a form button and use it as a floating add button. Like this.

image
image310×620 60.9 KB

2 Likes
#13

How you do dis magic?

1 Like
#14

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>
5 Likes
#15

Ah, I see

:man_facepalming: I’m a bit stupid today…

1 Like
#16

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?

#17

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
#18

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
#19

@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
#20

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.

7 Likes