Three buttons side by side?

[Lionel_Janus]

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

[AyS_0908]

Hi, maybe an element of answer here

Side by side buttons using CSS. Doesn't work in Safari, help needed

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/ I am currently using the following code: .fZlvaI { width: 33.33%; float: left; } .kmCjyN { display: unset; } [data-test=“app-button-view”] { margin: 6px; }

[ThinhDinh]

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

[PabloMFalero]

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

[Darren_Murphy]

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:

[Lionel_Janus]

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

[Eric_Penn]

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

[Lionel_Janus]

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

[PabloMFalero]

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

Here’s the code I use:

<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

[ThinhDinh]

Education Manager

[PabloMFalero]

nobody knows

[Darren_Murphy]

Okay, I won’t tell anyone.

[PabloMFalero]