# Three buttons side by side?

**URL:** <https://community.glideapps.com/t/three-buttons-side-by-side/31193>\
**Category:** Ask for Help\
**Created:** [August 31, 2021, 3:29pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193 "2021-08-31T15:29:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lionel\_Janus](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lionel_janus/32/29477_2.png) [@Lionel\_Janus](https://community.glideapps.com/u/Lionel_Janus)\
**Post date:** [August 31, 2021, 3:29pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/1 "2021-08-31T15:29:54Z")

</div>

Hello (and sorry for my english!),  
I have a tennis Livescore project which is almost finished thanks to the community for its help 🙂  
I am trying to make a better display for the score board pannel :

- for now it has a 2 buttons looks which is not perfect as I have to scroll down to have all the informations.  
The LEFT button to increase +1 the Set 1/player1 score.  
The RIGHT button to increase +1 the Set 2/player2 score.  
I have 3 button’s ligns (1 per set) with 3 other one (-1) in between

- I would like to have a 3 buttons system instead but I can’t make it right : can’t find a multiple buttons fonction / can’t reach the good behavior with an inline tiles/card system.  
The LEFT one would be for the player1/set1, the MIDDLE player 1/set2, the RIGHT player 1/set3  
So I would have only 2 ligns (1 per player) with 2 “-1” ligns in between.  
Any help woul be so much appreciated 🙂  
Cheers,  
Lionel

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

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [September 1, 2021, 11:31am UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/2 "2021-09-01T11:31:57Z")

</div>

Hi, maybe an element of answer here

> [@Side by side buttons using CSS. Doesn't work in Safari, help needed](https://community.glideapps.com/t/side-by-side-buttons-using-css-doesnt-work-in-safari-help-needed/18712):
>
> Hi! I can’t figure out why in Safari it is impossible to put three buttons in a row. Please tell me what should be the css code? Additional question: for some reason the buttons become inactive if you add text. below App - [https://elochka.glideapp.io/](https://elochka.glideapp.io/) I am currently using the following code: .fZlvaI { width: 33.33%; float: left; } .kmCjyN { display: unset; } [data-test=“app-button-view”] { margin: 6px; }

---

<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 1, 2021, 11:46am UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/3 "2021-09-01T11:46:05Z")

</div>

I believe @Manu.n did something about 3 entry components on the same line, not sure which thread it is to link here.

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [September 1, 2021, 11:51am UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/4 "2021-09-01T11:51:48Z")

</div>

It was two text entry component that Manu did, but I got a code for three buttons, I’ll put here in a bit

---

<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:** [September 1, 2021, 12:17pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/5 "2021-09-01T12:17:48Z")

</div>

An easy way to do this that doesn’t require any funky CSS is to just use an Inline List tiles layout.  
You can use a multi-step action with conditional branches that do different things depending on which button (tile) is tapped.

Here’s a couple of examples:

 ![Screen Shot 2021-09-01 at 8.14.48 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dc878637ee925e5144c6fe40b56b232b7c6ad028.png)

![Screen Shot 2021-09-01 at 8.15.25 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/4974935b21c21fdd7ec68318b2523c615f76f30e.png)

---

<div class="post-metadata">

**Author:** ![Lionel\_Janus](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lionel_janus/32/29477_2.png) [@Lionel\_Janus](https://community.glideapps.com/u/Lionel_Janus)\
**Post date:** [September 2, 2021, 11:29am UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/6 "2021-09-02T11:29:58Z")

</div>

Thank you for your reply. I think I will have to wait for an update hoping Glide will have 3 or 4 buttons bar option…  
I am not an expert and find it too hard to make it right with the iline list/tiles method…  
For now my system is :

- a livescore tab
- action = show details screen
- on details screens = my scorebard pannel with my buttons. When I tap on a button it increases a Set column value.  
All is fine except I would prefer to have 3 buttons per lign but it is ok!  
Cheers,  
Lionel

---

<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:** [September 2, 2021, 12:20pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/7 "2021-09-02T12:20:00Z")

</div>

Start a new tab with only three rows in it. (The three button names). Then point your inline list to that new tab.

---

<div class="post-metadata">

**Author:** ![Lionel\_Janus](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lionel_janus/32/29477_2.png) [@Lionel\_Janus](https://community.glideapps.com/u/Lionel_Janus)\
**Post date:** [September 2, 2021, 1:01pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/8 "2021-09-02T13:01:21Z")

</div>

Thanks Eric but still can’t figure how apply to every single match. I think I understand how create a tab with Set 1 Set 2 Set 3 buttons. Then another one with the Player 2 buttons.  
But if I want to apply this scoring method to all matchs (with iline/tiles replacing the details screen on tap on everymatch) then I am lost.  
But thank you anyway now I understand the inline list in its simple way 🙂  
Another silly question : do you think possible to increase a cell by +1 starting from 0 on the first tap instead of 1 ? It could be useful when the score is 1/0 instead to avoid having a blank and a 1/ score

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [September 3, 2021, 2:53pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/9 "2021-09-03T14:53:22Z")

</div>

Still haven’t sent you the code I use 🙂 sorry!! I’ll send it now

Here’s the code I use:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(#) {
margin-top:-0px;
margin-left:23%;
transform: translateX(-30%);
width:60%;
height:20px;
}
div[id*='screenScrollView'] > div > :nth-child(#) {
margin-top:-45px;
margin-left:74%;
transform: translateX(-30%);
width:31%;
height:20px;
}

```

Substitute the # by the number of the nth-child of your button bar and single button. SO add a button bar and below a single button

Edit: the single button may look a bit higher than normal, so adapt it to your needs, I put it like that cus in tablet mode is how it looks straight to me 🙂

---

<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 4, 2021, 12:00am UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/10 "2021-09-04T00:00:13Z")

</div>

Education Manager 😉

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [September 4, 2021, 1:07pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/11 "2021-09-04T13:07:45Z")

</div>

🤫🤫🤫🤫 nobody knows

---

<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:** [September 4, 2021, 1:09pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/12 "2021-09-04T13:09:56Z")

</div>

Okay, I won’t tell anyone.

 ![Screen Shot 2021-09-04 at 9.08.45 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/4/54197825d62149e400e01a99dc03818066cdafae.png)

🤣 🤣

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [September 4, 2021, 1:11pm UTC](https://community.glideapps.com/t/three-buttons-side-by-side/31193/13 "2021-09-04T13:11:34Z")

</div>

😂😂😂🤣🤣🤣