Log in to AnswerLog in to Follow
Dick Leung
14Views
7Comments
Solved
Button Group in desktop and mobile view
Question
CSS
Front-end
OutSystems Widgets
UX
Service Studio Version
11.10.15 (Build 40206)

Dear all,

How can I use the button group widget in desktop and mobile view using the CSS method to change responsive?

Thanks

DIck Leung

0
0
on 24th Mar
Benjith Sam
mvp_badge
MVP
Solution

Replying to Dick Leung's comment on 25 Mar 2021 08:52:01

Hi Dick,

If you want to implement similar to the shared codepen example, I could think of two ways to implement the same.

  • Basically you will have to use two widgets for this implemenation i.e. Button Group  + Popover Menu widget

Implementations

Implementation 1: Using the media query, you can show and hide the ButtonGroup and Popover Menu widgets on specific screen resolution.

Implemenation 2: Wrap the ButtonGroup and Popover Menu within a IF widget and as the condition expression, call the Device Detection > IsPhone inline function (defined in the OutSystemsUI module) and based on the function return boolean value you can toggle the widgets.

See this sample screen Responsive_ButtonGroupDemo

Refer to the attached .oml file

Note: Please improve the defined style defintion (Chaining style class etc.) in the respective Screen StyleSheet section as per your requirement.


Hope this helps you!


Kind regards,

Benjith Sam

See solution in context
RWALabResponsiveBtnGrp.oml

1
0
on 25th Mar

Hi Komal,

Thanks for your message, I found some example from codepen, this is what I want. how can I transform like this into outsystem pure CSS.

https://codepen.io/grgaortiz/pen/QNOGNp

Thank you

Dick Leung

0
0
on 25th Mar
1
0
on 25th Mar
Benjith Sam
mvp_badge
MVP
Solution

Replying to Dick Leung's comment on 25 Mar 2021 08:52:01

Hi Dick,

If you want to implement similar to the shared codepen example, I could think of two ways to implement the same.

  • Basically you will have to use two widgets for this implemenation i.e. Button Group  + Popover Menu widget

Implementations

Implementation 1: Using the media query, you can show and hide the ButtonGroup and Popover Menu widgets on specific screen resolution.

Implemenation 2: Wrap the ButtonGroup and Popover Menu within a IF widget and as the condition expression, call the Device Detection > IsPhone inline function (defined in the OutSystemsUI module) and based on the function return boolean value you can toggle the widgets.

See this sample screen Responsive_ButtonGroupDemo

Refer to the attached .oml file

Note: Please improve the defined style defintion (Chaining style class etc.) in the respective Screen StyleSheet section as per your requirement.


Hope this helps you!


Kind regards,

Benjith Sam

RWALabResponsiveBtnGrp.oml

1
0
on 25th Mar
Benjith Sam
mvp_badge
MVP

Replying to Dick Leung's comment on 25 Mar 2021 10:24:04

You're welcome, Dick.

Glad to help you :)


Kind regards,

Benjith Sam

0
0
on 25th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.