# How do decrease button gap?

**URL:** <https://community.glideapps.com/t/how-do-decrease-button-gap/37455>\
**Category:** Ask for Help\
**Created:** [January 20, 2022, 10:21am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455 "2022-01-20T10:21:30Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![remoteworker.id](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/remoteworker.id/32/36396_2.png) [@remoteworker.id](https://community.glideapps.com/u/remoteworker.id)\
**Post date:** [January 20, 2022, 10:21am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/1 "2022-01-20T10:21:30Z")

</div>

Hi guys, looking at below buttons, it seems like it’ll better to decrease the gap… right?

 ![Screen Shot 2022-01-20 at 17.19.25](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e33c65631a0529d201c653ab1983caadcf22784d.png)

Can we do that in Glide? Or do you have any other idea?

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [January 20, 2022, 6:08pm UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/2 "2022-01-20T18:08:30Z")

</div>

Do you mean to decrease the gap between the “Explore RWID” button and the “Paham min. Saya…” button?

---

<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 21, 2022, 12:28am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/3 "2022-01-21T00:28:28Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/0/603963574af67e41b51c4705a792efddf8fae8d4.png)

Here’s how it looks like at half the default width.

Use this in a rich text component.

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

[data-test="app-button-view"] {
margin: 6px 16px;
}

```

---

<div class="post-metadata">

**Author:** ![remoteworker.id](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/remoteworker.id/32/36396_2.png) [@remoteworker.id](https://community.glideapps.com/u/remoteworker.id)\
**Post date:** [January 30, 2022, 1:53pm UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/4 "2022-01-30T13:53:59Z")

</div>

Yess!  
Sorry for just coming back: too many tasks at hand. 🙂

---

<div class="post-metadata">

**Author:** ![remoteworker.id](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/remoteworker.id/32/36396_2.png) [@remoteworker.id](https://community.glideapps.com/u/remoteworker.id)\
**Post date:** [January 30, 2022, 1:57pm UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/5 "2022-01-30T13:57:16Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> [data-test="app-button-view"] {
> margin: 6px 16px;
> }
> 
> ```

This is new to me!  
Yes, it works.  
So, this styling … does it work application wide? Or just current tab?  
I guess this is application wide, right?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 30, 2022, 2:29pm UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/6 "2022-01-30T14:29:27Z")

</div>

It works only in the current tab…you’d need to place that CSS on all tabs to make it global.

---

<div class="post-metadata">

**Author:** ![Jim\_McIntosh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jim_mcintosh/32/19235_2.png) [@Jim\_McIntosh](https://community.glideapps.com/u/Jim_McIntosh)\
**Post date:** [January 30, 2022, 2:40pm UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/7 "2022-01-30T14:40:06Z")

</div>

I’d also recommend adding the CSS to a cell in a sheet used for looking up items throughout the application. This way you can adjust the style in one location and just reference CSS on each screen.

---

<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 31, 2022, 5:52am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/8 "2022-01-31T05:52:08Z")

</div>

I also use a ‘reference cell’ for all images. Then I use single value columns to bring the images into the correct sheets. This way I only have to change the image in one place.

---

<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 31, 2022, 6:02am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/9 "2022-01-31T06:02:34Z")

</div>

I like this approach. An extension to this approach that I’ve used is to bring all the images into my User Profiles table using Single Values, and then they can be used anywhere in the app without the need for additional columns.

---

<div class="post-metadata">

**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\
**Post date:** [January 31, 2022, 6:34am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/10 "2022-01-31T06:34:46Z")

</div>

I’m learning new Tips , Tricks, Easy ways everyday to work with Glide easily from this community. Thank you all!

---

<div class="post-metadata">

**Author:** ![remoteworker.id](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/remoteworker.id/32/36396_2.png) [@remoteworker.id](https://community.glideapps.com/u/remoteworker.id)\
**Post date:** [January 31, 2022, 7:14am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/11 "2022-01-31T07:14:01Z")

</div>

woa! Neat trick!

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [February 1, 2022, 7:14am UTC](https://community.glideapps.com/t/how-do-decrease-button-gap/37455/12 "2022-02-01T07:14:13Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.