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.