# CSS for hiding stuff!

**URL:** <https://community.glideapps.com/t/css-for-hiding-stuff/19631>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [December 9, 2020, 10:24pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631 "2020-12-09T22:24:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 9, 2020, 10:24pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/1 "2020-12-09T22:24:40Z")

</div>

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

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

```

### Hide edit pencil

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

```

### Hide the entire top part/header

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

```

### Hide Hamburger menu icon thingamajig!

```auto
<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:

```auto
<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

```

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 9, 2020, 10:25pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/2 "2020-12-09T22:25:46Z")

</div>

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…  
🤦‍♂️

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 9, 2020, 11:48pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/3 "2020-12-09T23:48:30Z")

</div>

We can edit the CSS and HTML?

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 10, 2020, 12:15am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/4 "2020-12-10T00:15:47Z")

</div>

You can place it in a rich text component

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 10, 2020, 12:20am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/5 "2020-12-10T00:20:58Z")

</div>

I see…hmmmm…

---

<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:** [December 10, 2020, 12:23am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/6 "2020-12-10T00:23:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 10, 2020, 12:32am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/7 "2020-12-10T00:32:29Z")

</div>

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

---

<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:** [December 10, 2020, 12:38am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/8 "2020-12-10T00:38:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 10, 2020, 12:41am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/9 "2020-12-10T00:41:12Z")

</div>

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.

😅 Well that was a run-on sentence

---

<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:** [December 10, 2020, 1:05am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/10 "2020-12-10T01:05:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 10, 2020, 1:10am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/11 "2020-12-10T01:10:30Z")

</div>

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

---

<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:** [December 10, 2020, 1:54am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/12 "2020-12-10T01:54:57Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b4a26e666cb90938f21633c704a61caa0fa52ab.jpeg)

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [December 10, 2020, 2:30am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/13 "2020-12-10T02:30:12Z")

</div>

How you do dis magic?

---

<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:** [December 10, 2020, 2:59am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/14 "2020-12-10T02:59:25Z")

</div>

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

> **[Screen Recording 2020-12-10 at 09.58.12 AM.m3u8](https://media.lowcode.agency/5zudd0OD)**

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

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 10, 2020, 4:42am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/15 "2020-12-10T04:42:49Z")

</div>

Ah, I see

🤦‍♂️ I’m a bit stupid today…

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [December 10, 2020, 5:21am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/16 "2020-12-10T05:21:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [December 10, 2020, 6:49am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/17 "2020-12-10T06:49:49Z")

</div>

> [@ehdubya](#):
>
> I think I understand the CSS part now but what is “.sc-euEtjk”?

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.

> [@ehdubya](#):
>
> This combined inside a Rich Text component only works in Details page configuration, correct?

Yes.

---

<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:** [December 10, 2020, 8:47am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/18 "2020-12-10T08:47:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 10, 2020, 1:59pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/19 "2020-12-10T13:59:26Z")

</div>

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

> [@Floating Form Button](https://community.glideapps.com/t/floating-form-button/16623/104):
>
> Try this…might be more future proof \<pre\>\<span\>\<style\> [data-test="app-button-view"] { position:fixed; width:60px; height:60px; bottom:10%; right:5%; border-radius: 50%; text-align: center; box-shadow: 1px 2px 20px 0px #444 !important; font-size:40px; font-weight: normal; } \</style\>\</span\>\</pre\>

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

> [@Floating Form Button](https://community.glideapps.com/t/floating-form-button/16623/113):
>
> I would be interested to see @Robert_Petitto’s solution as it may be better than mine. This is what I’m using right now. I have a CSS google sheet tab that I then load into the User Profile sheet using Single Value columns. This lets me update the CSS globally and fill the rich text component from the single value columns in the User Profile. [image] For both single and dual buttons, at Robert’s recommendation and as indicated in my earlier post ([Floating Form Button](https://community.glideapps.com/t/floating-form-button/16623/106)), I’m using ‘[date-test…

> [@Floating Form Button](https://community.glideapps.com/t/floating-form-button/16623/120):
>
> This is the CSS I’m currently using. \<pre\>\<span\>\<style\> [data-test=app-button-view] {position:fixed; width:60px; height:60px; right:5%; border-radius:50px; text-align:center; box-shadow: 2px 2px 3px #999 !important; font-size:40px; font-weight: normal; background-color: rgba(41, 87, 122, 0.118) !important; backdrop-filter: blur…

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 10, 2020, 2:42pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/20 "2020-12-10T14:42:53Z")

</div>

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

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

```

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

[Next page](https://community.glideapps.com/t/css-for-hiding-stuff/19631.md?page=2)