Responsive breakpoints for Controls, e.g. Radio Button?
Hi,
I would like to know whether it is possible to have Responsive breakpoints for Controls, e.g. Radio Button?
For example, by default, the radio button choices are shown as horizontal list, but when the screen is <768px, the choices will be displayed as vertical list, or maybe 3 per row with the rest wrapping into the next row and so on.
I am using PRPC 7.2.2. As I understand, this cannot be achieved, but just wanted to confirm my understanding.
Thanks and regards,
Jacky
***Updated by moderator: Lochan to add feedback request details***
Pegasystems Inc.
IN
Hello Jacky,
You can write custom css code to have responsive break points for controls. You can use media queries to have break points.
Kindly elaborate your requirement so that we can try the use case.
Thanks & Regards,
Hari.
Pegasystems Inc.
SG
Hi,
Allow me to elaborate on what I am looking for.
For Pega responsive UI, in the application skin, we can define various breakpoints. For example, using the Dynamic Layout, the "Default" format can be transformed into a "Stacked" format when max-width=768.
However, if you open the control settings in the skin, such as a Radio button, you will noticed that you cannot define the Responsive breakpoints.
To elaborate further, within a section rule, if you drop a radio button, you could specify if you want it to be vertical or horizontal, as well as the number of items per row.
If would be great if I could configure the control such that initially, its items are horizontal. When a certain screen size is met, it will transform into a vertical list. The current behaviour is that if I were to put it as horizontal, the item text will overlap when the screen becomes smaller, rendering it unreadable.
AFAIK, this cannot be done, can it?
Thanks and regards,
Jacky
Pegasystems Inc.
IN
Hello Jacky,
Thanks for your explanation.
I have done some css changes in local instance which achieved your requirement.
Kindly check the below screen shots for your reference.
Kindly add the below code snippet in user work form:-
<style>
@media only screen and (max-width: 768px) {
/* For mobile phones: */
div.radioTable span{
display:block !important;
}
}
</style>
Note:- It will effect the whole radiobutton control
Hope this helps.
Thanks & Regards,
Hari.
Pegasystems Inc.
SG
Hi Hari,
This looks great, would try it later.
Meanwhile, I would still hope Pega would add this into the product to be inline with the other components' way of responsiveness.
Thanks and regards,
Jacky
Pegasystems Inc.
IN
Hi Jacky,
Do let us know if you wish for us to create another product enahancement request for you or would this be included under the requirements you've listed on this post yesterday?
Regards,
Pegasystems Inc.
SG
Hi,
Would appreciate it if you could create one for this, thanks!
Regards,
Jacky
Pegasystems Inc.
IN
Hello!
I've created an FDBK request on our internal portal. The ID is noted in the Related Support Case Number field.
Regards,
Accenture Australia
AU
Hi Lochana,
I would like to know if this FDBK has been implemented and in which version of Pega.
Regards,
Vishwa
Pegasystems Inc.
US
Hi @Vishwakarmay!
I just checked and this FDBK-23381 item has not been implemented. Please take this to your Account Executive who can help you move this forward.
Thank you!
Coforge
IN
You will have to write custom css to handle this.