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: [data-test="back-button"]{ display: none } Hide edit pencil [data-test="nav-button-Edit"]{display: none} Hide the entire top part/header [data-test="glide-app-bar"]{display: none} Hide Hamburger menu icon thingamajig! [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: [data-test="nav-button-Add"]{display: none} /* Suggested: Create a visibility condition for when you don't want users to add items

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:

Are these classes (like .sc-euEtjk) a static name? If so, it would be great. I’ll try to jot down everything in the elements :smiley:

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

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.

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

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

If you have multiple tabs, here’s the code. [id="tabBar"]{ display: none; }

@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.

Sorry for the late reply. Here’s the one. #app-root div[opacity='1'] { color: transparent; }

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 }

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

CSS for hiding stuff!

Community Resources

ThinhDinh March 5, 2021, 12:46pm 46

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

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

Link to a sub tab

Topic		Replies	Views
Tell Glide how you use CSS General	128	18801	December 27, 2022
💁‍♂️ Add Info to Native User Menu with CSS Ask for Help	24	568	August 23, 2024
Beautiful Design App Project Showcase	818	40251	November 16, 2021
Floating Form Button Feature Requests	122	7967	February 9, 2021
CSS MessageBox Community Resources	100	6269	June 30, 2022

CSS for hiding stuff!

Related topics