Button Group in desktop and mobile view
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

mvp_badge
MVP
Solution

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

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

mvp_badge
MVP
Solution

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

mvp_badge
MVP

You're welcome, Dick.

Glad to help you :)


Kind regards,

Benjith Sam

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