Can I hide Tab Icon?

Searched and haven’t found here in community…

Can I hide (remove) Tab Icon and leave its label only?

You should be able to do this with CSS but not sure what the class would be. Inspect the element and take a look.

<pre><span><style>
.tbs-inner svg {
display: none;
}

This will do.

1 Like

Спасибо!)

Doing this is possible with css but it would hide all the icons for all the tabs, sadly.

<pre><span><style>
[class="sc-jffIyK zNKGZ"] {
visibility: hidden
}

@ThinhDinh - in your attached app screen - could you please discover for me how is that possible to put an image over the caption and under hamburger menu sign? Thanks

It’s a combination of two CSS codes.

This to hide the “top” part of the screen.

<div><div>
<style>
[data-test="glide-app-bar"] >* {
backdrop-filter: blur(0px);
background:transparent;
-webkit-backdrop-filter: blur(0px);
}
#app-root div[opacity='1'] {
  color: transparent; 
}
.jiuuwu svg {
display: none;
}
.gpkkHC svg {
display: none;
}
.gpkkHC {
position: unset;
}

This for the image. Use it in a template column, change {I} to the image link.

<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:500px;"></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="500" src="{I}">
   </a></p><center>
1 Like

Is there a resolution for this yet? On a given tab I want to hide the icons of some of the other tabs, but not all. For example, I have single use tabs that are part of an on-boarding workflow that I control with custom buttons. Once complete I want to be able to show tab icons that are relevant for regular use. In another app I added these tabs to the menu, but it’s not intuitive…

Edit: Is it practical to add image icons with actions (navigate to tab) to the bottom of the screen in place of the hidden icons?

I imagine you can use this and have an empty image on tabs where you don’t want an icon.

2 Likes

Wow these are great! Thanks, I’m going to try them out.

1 Like