Majda Ghayor (MajdaGhr)
Software Engineer
MajdaGhr Member since 2019 1 post
Posted: March 17, 2021
Last activity: April 28, 2021
Posted: 17 Mar 2021 14:51 EDT
Last activity: 28 Apr 2021 0:18 EDT

Scrollbar on a Dynamic Layout for Mobile Responsive

Hi, I am currently working on a modal in my home page. The modal contains five steps and on desktop it is supposed to be displayed without a scroll bar as all the content is displayed at once. However, on mobile, I must apply a minimum width breakpoint of 480px, when the screen reaches 480, the steps (each one of them is a dynamic layout containing a label and paragraph) should rearrange themselves in a responsive manner.

I have created layout formats to help me achieve that but now I need to implement a scroll bar for the modal that should appear only when the web page is reduced into mobile screen so when screen reaches 480px width.. But I am not able to do that in the standard tools of Pega so I added this line in the CSS skin of my application :

.scrollBarModal {

overflow-y: scroll;


Then I call scrollBarModal in my Dynamic layout 1 in the Custom CSS field of the advanced section. Now on the screen, I can see the scroll bar but it is always greyed out and disabled for some reason and I do not know why. Moreover, it appears immediately on click on the modal whereas it should appear only when I reduce the window until reaching mobile screen... Please help me achieve this, I have been searching for a solution on the Pega Community but cannot find the same use case.


***Edited by Moderator Marissa to change type from General to Product, update Product details and Platform Capability tags****
Pega Platform Mobile User Experience