Button Bar different colours for left and right

Ask for Help
1

How can I change the colour of the Button Bar right and left independently i.e. right to be red and left to be blue?

/Regards

2

Hola @Marra,

You might have to use CSS to achieve this. As of right now there’s no native way to do it.

Try and see if something like this helps

1 Like
3

Hey @SantiagoPerez,

Thank you, I will have a look, guess that is why my search did not find any ‘hits’ because if search “colour” and not “color” which is the US spelling :-). Anyway let me scratch around.

/M

1 Like
4

Just reporting back: right and left different colours

image
image403×584 46.9 KB

You need to set right button to “Transparent” to trigger the different class name
I also added extra colour change when button is pressed
Suggestions are encouraged

Next challenge to to change to top 2 Buttom Bars to “addopt” the colour of when either Left or Right is pressed.

image

CSS:


[data-test="app-button-view"]
            {position:center;
                 width:30%;
                 height:40px;
                 border-radius:50px;
                 text-align:center;
                 font-size:15px;
                 font-weight: normal;}
[data-test="app-button-view"]:active 
            {background-color: #bf0606 !important;
                 border-color: #bf0606 !important;}
.dqKUll.dqKUll 
{
background-color: grey;
border-color: grey;
color: white;
}
.fdrRBb.fdrRBb 
{
background-color: grey;
border-color: grey;
color: white;
}
4 Likes
5

Are these buttons an inline list? If so, you can set the color when clicked by using an if statement that switches between two different colored images when clicked. The if statements checks if you submitted an entry with that button via a relation and lookup. Does that help?

6

Hi @Errcomp, I was also thinking the same, but first wanted to give it a try with buttons. I might explore this route, as the CSS classes used to make buttons work might break at any time.

1 Like
7

Update: still using Button Bar. Setting the left side to “Bordered”

image

CSS:


[data-test="app-button-view"]
            {position:center;
             width:30%;
             height:40px;
             border-radius:50px;
             color: white !important;
             background-color: #1798a3 !important;
             border-color: #1798a3 !important;
             text-align:center;
             box-shadow: 0px 0px 0px 4px yellow;
             font-size:15px;
             font-weight: bold;}
[data-test="app-button-view"]:active 
            {background-color: red !important;
            border-color: red !important;}
2 Likes
8

Or you can use “INSET” to change the color of the Button set to Bordered

image


[data-test="app-button-view"]
            {position:center;
             width:30%;
             height:40px;
             border-radius:50px;
             color: white !important;
             background-color: #1798a3 !important;
             border-color: #1798a3 !important;
             text-align:center;
             box-shadow:20px 20px 50px 20px blue inset;
             font-size:15px;
             font-weight: bold;}
[data-test="app-button-view"]:active 
            {background-color: red !important;
             border-color: red !important;}
8 Likes
9

Hi @Marra,
have you ever tried to change the alignment of the text inside the button to the left or right?
It seems that [data-test=“app-button-view”]{text-align:left;} work.

I’m using a standard button, not a button bar.
Thanks.

1 Like
10

Hi @christoph have you tried “justify-content: left;” ?

11

Perfect, this works. Thank you.

12

Is this supposed to change colors when click as static? If not can it be done? For instance change colors when on pressed between each other. Or whatever method we can use. Like reset, and now i left/right is colored selected.

13

Hi @abe.sherman

Correct when you click it it change colour for a brief moment, this give you an visual indication as that the click was registered. However it reverts back to the original static colour. Hope this answers your question.