Skip to Content (Press Enter)
UserImage.jpg
SAIKAT BHATTACHARYA
524Views
6Comments
Solved
Different button color on selecting a button from "Button Group" widget
Question

In a mobile app, I have used a "Button Group" widget. I need to have different colours for each button is selected like the following image. Can anyone please help me in acheiving this?


grp_btn_color.png
0
0
25 Jan 2019
Copy Link
2018-10-18 08-34-00
Eric Bulters
 
MVP
Solution

You can assign a different class to each button and create an selected style like this:


button.button-group-item.button-group-selected-item.[Button specific class name] {
   background-color: [Button specific color code];
}

See solution in context
0
0
25 Jan 2019
Copy Link
UserImage.jpg
SAIKAT BHATTACHARYA

Eric Bulters wrote:

You can assign a different class to each button and create an selected style like this:


button.button-group-item.button-group-selected-item.[Button specific class name] {
   background-color: [Button specific color code];
}

Hi Eric,

Thanks a lot.

Regards,

Saikat


0
0
25 Jan 2019
Copy Link
2022-06-07 11-25-18
DiogoRomero

Hi Saikat,


There is a very good start guide for mobile development in the Learn section that covers a situation exacly like you are looking for with a Button Group.You can find it probably on the "UI Basics" section, but i would recomend you to take a look at the entire course since you seem to be starting using the platform, and you would learn a lot with it :)

Here is the link: https://www.outsystems.com/learn/courses/12/developing-outsystems-mobile-apps/?StartCourse=False


Best Regards,

Diogo Romero

0
0
25 Jan 2019
Copy Link
UserImage.jpg
SAIKAT BHATTACHARYA

Romero wrote:

Hi Saikat,


There is a very good start guide for mobile development in the Learn section that covers a situation exacly like you are looking for with a Button Group.You can find it probably on the "UI Basics" section, but i would recomend you to take a look at the entire course since you seem to be starting using the platform, and you would learn a lot with it :)

Here is the link: https://www.outsystems.com/learn/courses/12/developing-outsystems-mobile-apps/?StartCourse=False


Best Regards,

Diogo Romero

Thanks Romero.

Regards,

Saikat


0
0
25 Jan 2019
Copy Link
2018-10-18 08-34-00
Eric Bulters
 
MVP
Solution

You can assign a different class to each button and create an selected style like this:


button.button-group-item.button-group-selected-item.[Button specific class name] {
   background-color: [Button specific color code];
}

0
0
25 Jan 2019
Copy Link
UserImage.jpg
SAIKAT BHATTACHARYA

Eric Bulters wrote:

You can assign a different class to each button and create an selected style like this:


button.button-group-item.button-group-selected-item.[Button specific class name] {
   background-color: [Button specific color code];
}

Hi Eric,

Thanks a lot.

Regards,

Saikat


0
0
25 Jan 2019
Copy Link
2021-10-17 12-36-16
Amreen Shaikh

hi Saikat,

Just use onclick event of a button to change the color of it.


regards

amreen


0
0
25 Jan 2019
Copy Link
2018-10-18 08-34-00
Eric Bulters
 
MVP

You are welkom Saikat, glad to help

1
0
25 Jan 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.