20
Views
8
Comments
Solved
Popup scroll is not working (using CSS)
Question

Hi,

I worte the css in popup blocks. one block is good working but other is not working. they have a same css

1. good working popup css

when I scroll this popup, I can see scroll bar. and popup contents doesnt overflow 


2.not working popup css

when I scroll this popup, I cant see the scroll bar and contents doesnt move. and they are overflow

why is this issue happening?


Thanks,

2025-11-19 06-14-01
Miguel Verdasca
Champion
Solution

Hi Minjung,

If one popup scrolls correctly and another one doesn’t, even though they “use the same CSS”, it is usually because the HTML structure or the applied styles are not exactly the same.

A few things you can check:

  1. Check which element has overflow-y and height Make sure the scroll is applied to the popup content container, not to the outer popup wrapper. For example:

    .my-popup-content {

        max-height: calc(100vh - 120px);

        overflow-y: auto;

    }

    Then assign my-popup-content to the Container inside the Popup (the one that wraps all fields).

  2. Look for an ancestor with overflow: hidden In the popup that does not scroll, there may be a parent container (or the screen layout) with overflow: hidden or position: fixed that prevents the scroll from appearing. Use the browser DevTools (Inspect Element) and compare the working popup and the non-working one to see if any parent has overflow: hidden or a fixed height.

  3. Confirm that the same CSS class is really applied Sometimes the CSS is identical, but the class is attached to different elements (for example, on the Popup widget in one case and on an inner Container in the other). Make sure the non-working popup uses the same class on the same level of the structure.

  4. Check for conflicting rules On the popup that does not scroll, another CSS rule may be overriding your scroll rule (for example overflow: visible or a different height). In DevTools, look at the “Styles” panel and verify which rules are actually applied to that container.

If you can share the exact CSS and a screenshot of the element tree from DevTools for both popups, it will be easier to point to the exact cause, but most scroll issues in popups come from one of the points above.

2023-02-20 05-20-57
Nam Nguyen

Hi,
Could you share oml file ?


Thanks

Nam 

UserImage.jpg
minjung yuk

Hi Nam,

I attached oml file

Thanks,

Interface_v110.oml
2025-12-22 13-50-43
Sherif El-Habibi
Champion

Hello,

If it’s okay with you, you could incorporate a Scrollable Area widget. It would give you better control over the layout and make things easier to manage. 

UserImage.jpg
minjung yuk

Hi Sherif,

is it possible to scroll content vertically?

Thanks,

2025-12-22 13-50-43
Sherif El-Habibi
Champion

Yes, it’s totally possible. You just get the Orientation static entity from OutSystemsUI, then choose either vertical or horizontal in the Orientation property. 

2023-10-16 05-50-48
Shingo Lam

Hi @minjung yuk ,

In my opinion, Outsystems supports a lot of useful components for almost every popular purpose. It is for us to learn how to apply them efficiently. We can find not only the ScrollableArea, but also many other components in the Outsystems UI.

Welcome to lowcode world.

2025-11-19 06-14-01
Miguel Verdasca
Champion
Solution

Hi Minjung,

If one popup scrolls correctly and another one doesn’t, even though they “use the same CSS”, it is usually because the HTML structure or the applied styles are not exactly the same.

A few things you can check:

  1. Check which element has overflow-y and height Make sure the scroll is applied to the popup content container, not to the outer popup wrapper. For example:

    .my-popup-content {

        max-height: calc(100vh - 120px);

        overflow-y: auto;

    }

    Then assign my-popup-content to the Container inside the Popup (the one that wraps all fields).

  2. Look for an ancestor with overflow: hidden In the popup that does not scroll, there may be a parent container (or the screen layout) with overflow: hidden or position: fixed that prevents the scroll from appearing. Use the browser DevTools (Inspect Element) and compare the working popup and the non-working one to see if any parent has overflow: hidden or a fixed height.

  3. Confirm that the same CSS class is really applied Sometimes the CSS is identical, but the class is attached to different elements (for example, on the Popup widget in one case and on an inner Container in the other). Make sure the non-working popup uses the same class on the same level of the structure.

  4. Check for conflicting rules On the popup that does not scroll, another CSS rule may be overriding your scroll rule (for example overflow: visible or a different height). In DevTools, look at the “Styles” panel and verify which rules are actually applied to that container.

If you can share the exact CSS and a screenshot of the element tree from DevTools for both popups, it will be easier to point to the exact cause, but most scroll issues in popups come from one of the points above.

2025-12-18 01-28-51
Peter Hieu

Hi @minjung yuk 

You can see the OML file bellow.

Hope this helps,

Peter Hieu.

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