# Huge blank when I hide Title Bar

**URL:** https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125
**Category:** Ask for Help
**Created:** [September 22, 2021, 6:51am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125 "2021-09-22T06:51:15Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 6:51am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/1 "2021-09-22T06:51:15Z")

</div>

Thks to many of you, I’ve got a cleaner screen with no Top titles, hamburger, nor tab icons bar. Breathing app…  
And a full pitch black background instead of the grey that comes with the dark mode theme.

But, there’s a blank left that shows the default grey background.  
It’s not the image (the fedora “Indiana Jones / Humphrey Bogart” / Any Private Agent hat) that I can move down, it does not change this PB.  
How can I best “cover” this title spot with black.

Thks 🌸

 ![Screenshot_2021-09-22-07-53-54](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/1268fed35f480a47ce417faefb9d9a4479039ac7.jpeg)

---

<div class="post-metadata">

### Author: ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [September 22, 2021, 7:01am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/2 "2021-09-22T07:01:29Z")

</div>

Hi Ly-Mei,

When you leave your tab label blank (no text), at the top of the screen no text appears but the space remains.

In the Glide builder, _natively_, there is no way around this right now.

The CSS squad might be able address this however 🙂

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 7:20am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/3 "2021-09-22T07:20:22Z")

</div>

Thanks, Nathanaël, I feel less stupid already! 😅

---

<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: [September 22, 2021, 7:58am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/4 "2021-09-22T07:58:27Z")

</div>

Can you share the CSS snippets you are currently using for this screen, and what layout theme are you using for the app?

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 8:18am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/5 "2021-09-22T08:18:44Z")

</div>

```auto
<div class="box">
<p class="bece">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/sbbqGI52PLBEQsjYZhMY/pub/kqCrmhXmHdMtnq2hZmn7.png">

Bienvenue<br><br>
Je suis Sharon, <br>
Agent privé du PM.<br><br>
Ma Mission : Ton Autonomisation. <br>
<br>
Ainsi qu’à tous les Product People <br>
en recherche d’amélioration continue. <br><br>
Je suis 1 asset, 1 actif, <br>
1 bien dont les utilisateurs s’approprient<br>
 tout au long de leur cycle de vie Produits. <br>
</p>

</div>
​<style>
body{
margin: 0;
padding: 0;
}
​.box{
position: fixed;
top:0;
width:101%;
margin-left:-4.5%;
height:850px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, white, #ccc) !important;
}

```

The future “glowing floating button”, not yet working:

```auto
<pre><span><style> 
div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style { 
        background-color: #8F6072;
       
      }
      @keyframes glowing {
        0% {
          background-color: silver;
          box-shadow: 0 0 5px white;
        }
        50% {
          background-color: grey;
          box-shadow: 0 0 20px white;
        }
        100% {
          background-color: green;
          box-shadow: 0 0 5px purple;
        }
      }
      div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style {
        animation: glowing 1300ms infinite; } 

```

```auto
<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
    display: none;
}

```

The black background:

```auto
<pre><span>
<div class="background"></div>
<style>
html { f}
.background {
position:fixed;
margin-top:0;
background:#000000;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}

```

The background beaming light image:

```auto
<a style="position: fixed; 
width: 140%; 
top:280px;
right: -30%; 
z-index:-1;
" target="_blank" rel="noopener">

<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/sbbqGI52PLBEQsjYZhMY/pub/hhfHRNjXWEd0gpboVpvq.png" title="" style="">

```

The hide bottom tab icons menu:

```auto
<pre><span><style>
[id="tabBar"]{
display: none;
}
[data-test="glide-app-bar"] :nth-child(1) {
    display:;
}
#app-root div[opacity='1'] {
  color: transparent; 
}

```

The position of the floating button:

```auto
<pre><span><style>
.fab-target >:nth-child(1) {
position: fixed;
top: 50% ;
right: 10%
}

```

There must be sth conflicting. The above CSS are copied here in order from top to bottom.  
And my theme is captured here  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/833a0bab74aa96ad1896a08f2771563225905ab2.png)  
Thks 🌸

---

<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: [September 22, 2021, 8:59am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/7 "2021-09-22T08:59:46Z")

</div>

> [@L.M](#):
>
> ```auto
> <pre><span><style>
> [data-test="glide-app-bar"] :nth-child(1) {
> display: none;
> }
> 
> ```

Change the code above to this:

```auto
<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
    display: none;
}

[data-test="glide-app-bar"] {
background: black;
}

```

---

<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: [September 22, 2021, 9:01am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/8 "2021-09-22T09:01:55Z")

</div>

> [@L.M](#):
>
> ```auto
> <pre><span><style> 
> div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style { 
> background-color: #8F6072;
>        
> }
> @keyframes glowing {
> 0% {
> background-color: silver;
> box-shadow: 0 0 5px white;
> }
> 50% {
> background-color: grey;
> box-shadow: 0 0 20px white;
> }
> 100% {
> background-color: green;
> box-shadow: 0 0 5px purple;
> }
> }
> div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style {
> animation: glowing 1300ms infinite; } 
> 
> ```

Is this an attempt to make the sole floating button glow? I believe you’re not targeting a floating button here, so please clarify then I can help.

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:08am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/9 "2021-09-22T09:08:09Z")

</div>

Yes, it is. It’s working as preview in @Uzo Code Book. (My colors are just for testing purposes, as I can’t manage to see them yet). Thks, Uzo, BTW ✔😊🌸  
But I only copied the CSS so that you can identify if there’s sth conflicting with the background.

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:18am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/10 "2021-09-22T09:18:18Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> [data-test="glide-app-bar"] {
> background: black;
> }
> 
> ```

looks better, but on my smartphone, there’s still some blank rows

 ![Screenshot_2021-09-22-11-11-31](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/229c5e8842e4c36d1b205f39b8b13ec959c9c4cd.png)

Question: is it in the syntax to repeat the [data-test=“glide-app-bar”] ? instead of adding the new param?

---

<div class="post-metadata">

### Author: ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)
#### Post date: [September 22, 2021, 9:22am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/11 "2021-09-22T09:22:07Z")

</div>

Hi @L.M

Just a question…

Is the search button deactivated in the Options tab?

It can cause this type of effect especially if there are searchable items in your screen, the search option gets activated automatically…

---

<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: [September 22, 2021, 9:33am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/12 "2021-09-22T09:33:26Z")

</div>

Please check Luther’s question. I can’t replicate that space in my builder.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/a/0a0719fb53276ba444dd8eadeb57027bbcb2a043.jpeg)

> [@L.M](#):
>
> is it in the syntax to repeat the [data-test=“glide-app-bar”] ? instead of adding the new param?

I don’t understand this question. Can you elaborate?

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:35am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/13 "2021-09-22T09:35:06Z")

</div>

Thks Luther, well there’s no search activated on this tab, since it’s not even possible in the options.  
It’s the 1st tab of my app (and I intend to hide it from the tab icons menu once you open that door).  
But the search is activated elsewhere in the app.

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:38am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/14 "2021-09-22T09:38:44Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> [data-test="glide-app-bar"] :nth-child(1) {
> display: none;
> }
> 
> [data-test="glide-app-bar"] {
> background: black;
> }
> 
> ```

I see 2 lines of [data-test=“glide-app-bar”]  
Can they be written with only 1 line?

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:39am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/15 "2021-09-22T09:39:32Z")

</div>

The builder looks fine. It’s on the mobile that the issue occurs.  
Anyway, thks for the trouble. I can consider other options. Like the full screen background image if it’s the workaround. Or revert to the theme’s grey for this screen.

## Maybe the pb will disappear once I optimize the title bar with

## (title) (logo (cliquable?)) (edit profile thumbnail pic)

---

<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: [September 22, 2021, 9:47am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/16 "2021-09-22T09:47:15Z")

</div>

Did you enable any search bars on that screen?

> [@L.M](#):
>
> I see 2 lines of [data-test=“glide-app-bar”]  
> Can they be written with only 1 line?

No, they are two different things (differentiated by the nth-child part).

---

<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: [September 22, 2021, 9:49am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/17 "2021-09-22T09:49:14Z")

</div>

```auto
<pre><span>
<div class="background"></div>
<style>
html { f}
.background {
position:fixed;
margin-top:0;
background:#000000;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}

```

Change top: 5.5em to top: 4em and test again. You’re leaving a bit of space there, hence why you see the different color.

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:51am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/18 "2021-09-22T09:51:14Z")

</div>

There’s no search possible on that screen.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e12fddef23fdc046b07b92ab6201e4a7dce9f144.png)

---

<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: [September 22, 2021, 9:52am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/19 "2021-09-22T09:52:06Z")

</div>

Yeah, I noticed a bit difference in screen previews when I tried Android & iOS, so please change the top parameter as I noted in the comment above.

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:58am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/20 "2021-09-22T09:58:17Z")

</div>

You know what?  
I put 0em and it’s working! (4em was a thin row, so I “made an educated guess”, as Malkovitch would say)  
You’re awesome, thanks so much 🌸  
SOLVED  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bf28492e58f9a65be57a55262ba24346fb77318b.png)

---

<div class="post-metadata">

### Author: ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)
#### Post date: [September 22, 2021, 9:59am UTC](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125/21 "2021-09-22T09:59:18Z")

</div>

Yes, I’ll have to hope it will be OK on other mobiles… One step at a time.

[Next page](https://community.glideapps.com/t/huge-blank-when-i-hide-title-bar/32125.md?page=2)