# Button Bar more than two buttons

**URL:** <https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173>\
**Category:** Ask for Help\
**Created:** [January 14, 2022, 1:41pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173 "2022-01-14T13:41:07Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 14, 2022, 4:08pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/21 "2022-01-14T16:08:45Z")

</div>

> [@Darren\_Murphy](#):
>
> I’m using a bit of guesswork here

It’s not really guesswork when you know the in and outs of the system so well. As they say, clearly this is not your first rodeo 🏇

You “guessed” right and it now works perfectly!  
Thanks again and have a great weekend

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 16, 2022, 12:00pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/22 "2022-01-16T12:00:57Z")

</div>

> [@Darren\_Murphy](#):
>
> oh yeah, I forgot to mention that. You’ll need to add a bit of CSS to suppress the tile overlay:
> 
> ```auto
> <pre><span><style>
> [data-test="tile-item"] .tile-overlay { background: none; }
> 
> ```

Hi  
Not sure what happened, but the tiles have “grown”. I’m using the 3:1 setting. A couple of days ago it was roughly the height of the button bar component, but now is much higher.  
Any ideas? (=tell me what I touched to mess this up… )  
Thanks

---

<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:** [January 16, 2022, 12:35pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/23 "2022-01-16T12:35:04Z")

</div>

I have no idea. How many tiles do you have?  
Can I see a screenshot?

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 16, 2022, 12:43pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/24 "2022-01-16T12:43:02Z")

</div>

> [@Darren\_Murphy](#):
>
> Can I see a screenshot?

Sure. Apologies for having to mask the text. Top row is the inline list and below it I’ve placed a button bar for comparison

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d27cf371e1c812f4092adf07ad169c7a6cb6639a.png)

---

<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:** [January 16, 2022, 12:51pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/25 "2022-01-16T12:51:04Z")

</div>

Is that phone or tablet layout?  
Those proportions look about right for tablet layout.  
Here is what I get with 3 tiles as 3x1

Phone:  
 ![Screen Shot 2022-01-16 at 8.47.45 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/22ede040f962952d6783d9334a28bcc6694343f0.png)

Tablet:

 ![Screen Shot 2022-01-16 at 8.49.30 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/309afc15a333bf4ee70b59275d607d4fb8df0dfd.png)

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 16, 2022, 3:47pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/26 "2022-01-16T15:47:28Z")

</div>

> [@Darren\_Murphy](#):
>
> Those proportions look about right for tablet layout.

You’re right, indeed tablet mode.  
But that’s not making any sense: in tablet mode, the tiles are bigger than the buttons, while in phone mode the buttons are bigger (and they are both much more aesthetic). Now way to tweak this?

---

<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:** [January 16, 2022, 4:19pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/27 "2022-01-16T16:19:08Z")

</div>

I’d say it’s possible, but CSS is not one of my strengths. You’d need to detect the viewport, and then conditionally apply some appropriate CSS. @ThinhDinh might be able to help you with this one.

---

<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:** [January 16, 2022, 5:01pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/28 "2022-01-16T17:01:00Z")

</div>

The tile sizing is a ratio. 3 parts width to 1 part height. It’s not a set size in pixels. It will vary depending on the width of your screen. I think tiles would look very weird if you had a really wide screen and the tiles stretched to fit the width but the height didn’t change. At that point the tiles wouldn’t be following the ratio and would actually need a ratio of 6:1, 9:1 or 12:1, which isn’t an option. Also, your images in the tiles would end up being stretched.

Buttons on the other hand have a set height and don’t contain images. Because of their design, the width can steet accordingly without affecting how the button looks. The text in a button just centers itself within the button.

Like @Darren_Murphy said, you would probably need some code to detect the viewport and apply different CSS depending on the screen width. Or maybe you can apply a static height to the tiles with some CSS, so it’s always the same height, but the width will still change depending on screen size.

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 16, 2022, 6:21pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/29 "2022-01-16T18:21:04Z")

</div>

Thanks to both of you.  
I guess this is the downside of working around the lack of possibilities to configure the button bar. Hope someone here can find a solution to make this a bit more aesthetically pleasing.

---

<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:** [January 17, 2022, 12:12am UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/30 "2022-01-17T00:12:21Z")

</div>

> [@Jeff\_Hager](#):
>
> Or maybe you can apply a static height to the tiles with some CSS, so it’s always the same height, but the width will still change depending on screen size.

I think this is the way to go, better force both of them to the same size if you’re gonna do it.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d966a7b4e61c553d622b7e0216c5147645cb2c46.jpeg)

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .tile-image-area >div {
height: 45px !important;
}

div[id*='screenScrollView'] > div > :nth-of-type(2) >div >div button {
min-height: 45px !important;
} 

```

Please note that I’m specifically targeting the 1st and 2nd elements on the screen here.

More on this method:

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=502cfbc7cc3b44f4b769e692eca6793d)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [January 17, 2022, 4:03am UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/31 "2022-01-17T04:03:34Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0d5fa82f26a0e78e62c7e448d3f6bcc56b4c7ddb.gif)

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 17, 2022, 8:44am UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/32 "2022-01-17T08:44:45Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> div[id*='screenScrollView'] > div > :nth-of-type(1) .tile-image-area >div {
> height: 45px !important;
> }
> 
> div[id*='screenScrollView'] > div > :nth-of-type(2) >div >div button {
> min-height: 45px !important;
> } 
> 
> ```

Thanks!  
That’s not working for me.  
What I tried is to tweak @Darren_Murphy’s code:

```auto
<pre><span><style>
[data-test="tile-item"] 
{color: black} .tile-overlay { background: none; 
height: 45px !important; 
},

```

But that’s resulting in this… 🙂  
Backgroud and foreground ? 😮

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8f470ef873fdbe02951bfa9b05a94a84a6e00b27.png)

---

<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:** [January 17, 2022, 9:02am UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/33 "2022-01-17T09:02:01Z")

</div>

You’re probably better off tweaking what @ThinhDinh gave you. It’s a just a matter of targeting the correct `nth-of-type()`. Try fiddling with the numbers there…

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 17, 2022, 11:11am UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/34 "2022-01-17T11:11:31Z")

</div>

> [@Darren\_Murphy](#):
>
> Try fiddling with the numbers there…

But I can’t find the correct nth.  
I tried moving the list to the top of the page but it’s probably not much relevant.  
When inspecting the page code, where can I find this nth?

---

<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:** [January 17, 2022, 11:15am UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/35 "2022-01-17T11:15:04Z")

</div>

What I normally do is start at 1 and work my way up until I find it. Just be aware that once you have it, if you subsequently rearrange the components on the screen you’ll likely break it.

---

<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:** [January 17, 2022, 12:14pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/36 "2022-01-17T12:14:16Z")

</div>

And take into account the different visibility conditions as well while we’re at it. One component might be 2nd to one user but 1st to another one.

The method I used was merely to protect you from forcing all inline lists and button bars on the screen to behave the same way. Let me know if you don’t have multiple of them and we can tweak the code.

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 17, 2022, 12:37pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/37 "2022-01-17T12:37:44Z")

</div>

> [@ThinhDinh](#):
>
> protect you from forcing all inline lists and button bars on the screen to behave the same way.

oh, I see.  
But I’m fine with forcing them all to behave the same

---

<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:** [January 17, 2022, 1:54pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/38 "2022-01-17T13:54:12Z")

</div>

For the tile, you can use this.

```auto
<pre><span><style>

[data-test="tile-item"] .tile-image-area >div {
height: 45px !important;
}

```

I just realized the button bar does not have a stable class name so if you want to use that part you should use my method.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [January 17, 2022, 1:59pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/39 "2022-01-17T13:59:53Z")

</div>

I see what you mean @Eric_Penn 😅

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 17, 2022, 4:10pm UTC](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173/40 "2022-01-17T16:10:23Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> [data-test="tile-item"] .tile-image-area >div {
> height: 45px !important;
> }
> 
> ```

Thanks but not working ☹  
No change in tile height

[Previous page](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173.md?page=1)

[Next page](https://community.glideapps.com/t/button-bar-more-than-two-buttons/37173.md?page=3)