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

<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:** [February 2, 2021, 7:32am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/42 "2021-02-02T07:32:19Z")

</div>

If you see something involving data-test then it’s likely to be a static one, else no.

---

<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:** [February 2, 2021, 11:03am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/43 "2021-02-02T11:03:16Z")

</div>

I think it’s a no at this point. Not sure if there’s a CSS to have a dynamic size based on screen. If anyone can contribute it would be of great help.

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [March 5, 2021, 10:37am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/44 "2021-03-05T10:37:26Z")

</div>

@Pablo_books Thanks for these helpful tips.  
Is there a way to hide the whole tab bar at the bottom?

---

<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:** [March 5, 2021, 12:01pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/45 "2021-03-05T12:01:12Z")

</div>

If you only have one visible tab in your app, the tab bar would already be hidden.

---

<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:** [March 5, 2021, 12:46pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/46 "2021-03-05T12:46:10Z")

</div>

If you have multiple tabs, here’s the code.

```
<pre><span><style>
[id="tabBar"]{
display: none;
}
```

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [March 5, 2021, 3:33pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/47 "2021-03-05T15:33:41Z")

</div>

@ThinhDinh Thank you!

How would I hide the page title (text in the middle) in a detailed screen, in the source code I find the title at 2 places.

---

<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:** [March 11, 2021, 11:10pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/48 "2021-03-11T23:10:15Z")

</div>

Sorry for the late reply. Here’s the one.

```
<pre><span><style>
#app-root div[opacity='1'] {
  color: transparent; 
}
```

---

<div class="post-metadata">

**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\
**Post date:** [May 25, 2021, 7:00am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/49 "2021-05-25T07:00:03Z")

</div>

Just discovered this for hiding the submit button in a form. I use it when I want floating buttons for FAQ pages.

```
[data-test="nav-button-Submit"]{ display: none }
```

---

<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:** [May 25, 2021, 8:28am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/50 "2021-05-25T08:28:56Z")

</div>

Is there any reason you don’t use a link to screen action?

---

<div class="post-metadata">

**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\
**Post date:** [May 25, 2021, 8:55am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/51 "2021-05-25T08:55:18Z")

</div>

Yeah it means I don’t have to add more tabs to my database! 🙂

Also it slides up which is pretty neat.

---

<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:** [May 25, 2021, 9:35am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/52 "2021-05-25T09:35:34Z")

</div>

You would be linking to the same item (this item), that’s not an additional tab, just to be clear 😅

I think I had the same idea at one point but opt against it due to the “Cancel” text.

---

<div class="post-metadata">

**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\
**Post date:** [May 25, 2021, 10:00am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/53 "2021-05-25T10:00:21Z")

</div>

I would need a tab to link to. Right now I just copy and paste into custom fields.

Plus the slide up is really cool.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 25, 2021, 11:20am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/54 "2021-05-25T11:20:19Z")

</div>

This seems like a very odd use case.  
If you’re hiding the submit button in a form, then how do your users actually submit the form? 🤔

---

<div class="post-metadata">

**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\
**Post date:** [May 25, 2021, 1:04pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/55 "2021-05-25T13:04:54Z")

</div>

Because i’m using it to display information, not to action anything so the submit button is just a tad confusing.

I’m using it like a modal/pop up.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 25, 2021, 1:12pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/56 "2021-05-25T13:12:30Z")

</div>

ah, I see.

Okay, well as @ThinhDinh pointed out, the usual way to do this would be with a Link to Screen → This Item action.

That said, if this works for you then fair enough. I can’t immediately think of any downside, other than it being a bit unconventional. Trying to think of a suitable analogy… perhaps a bit like booking a table in a restaurant because you need somewhere to sit for a while 😉

---

<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:** [May 25, 2021, 4:12pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/57 "2021-05-25T16:12:49Z")

</div>

I agree with the Link to Screen → This Item method. It’s just a new screen for the same row you are viewing, so it keeps you on the same row, but you can design it independently from the previous screen and doesn’t require any CSS manipulation or additional tabs or tables. I only use a form if I intend to actually submit data. One of my apps is mostly based off a single row and all navigation is controlled with that same row by using visibility or Link to Screen → This Item to go to other screens. The entire time it’s still linked to a single user profile row as the main driver.

But, like what was mentioned, it works either way, so if you are happy with it, then it shouldn’t be a problem. I tend to get leery about hiding buttons like that. It may not be an issue with the submit button, but I feel like doing something like hiding a back button could still be averted because at least android still has it’s own back button that could override a hidden back button, but I haven’t ever tested to see if that’s actually the case.

---

<div class="post-metadata">

**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\
**Post date:** [May 25, 2021, 4:29pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/58 "2021-05-25T16:29:41Z")

</div>

I just discovered how to hide the ‘cancel’ button as well, now I just have another floating button with a back arrow to go back. Works pretty sweet, really happy with it.

The content that is going in these pages is data that I don’t really need in a database so having a tab to link to for the info is not necessary. Also I can’t understate the utility of the up-motion for the UI flow of the app.

I’m actually using it in a form as well too ha, ‘form-ception’.

It’s about as close as I can get to it feeling like a modal.

---

<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:** [May 25, 2021, 11:31pm UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/59 "2021-05-25T23:31:36Z")

</div>

Glad that you found what you need, and I agree the up-motion is pretty slick, one client of mine said the same a while ago.

> [@Adam\_Crossley](#):
>
> The content that is going in these pages is data that I don’t really need in a database so having a tab to link to for the info is not necessary.

Regarding this, if you follow the Link to this item way, you’re just linking to the current row and if your components are all containing custom info then you don’t actually need to have anything more in your database.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [May 27, 2021, 4:00am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/60 "2021-05-27T04:00:26Z")

</div>

Like the idea. Rather cool. Replace the cancel with some CSS close

---

<div class="post-metadata">

**Author:** ![Proyecto\_Kolectivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/proyecto_kolectivo/32/33010_2.png) [@Proyecto\_Kolectivo](https://community.glideapps.com/u/Proyecto_Kolectivo)\
**Post date:** [October 15, 2021, 4:33am UTC](https://community.glideapps.com/t/css-for-hiding-stuff/19631/61 "2021-10-15T04:33:20Z")

</div>

Buenas Noches como puedo ocultar los enlaces en Glide en funcion de la @media query

//HTML

```auto
<a class="whatsappLink mobile" href="whatsapp://send?text=Tu mensaje&phone=+34123456789&abid=+34123456789"></a><a class="whatsappLink desktop" href="http://web.whatsapp.com/send?text=Tu mensaje&phone=+34123456789&abid=+34123456789"></a>

```

//CSS

.whatsappLink.mobile{  
display: none;  
}  
@only screen and (max-width:1024px){  
.whatsappLink.desktop {  
display: none;  
}  
.whatsappLink.mobile{  
display: inline;  
}  
}

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

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