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,
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:
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).
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.
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.
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.
Hi,Could you share oml file ?
Thanks
Nam
Hi Nam,
I attached oml file
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.
Hi Sherif,
is it possible to scroll content vertically?
Yes, it’s totally possible. You just get the Orientation static entity from OutSystemsUI, then choose either vertical or horizontal in the Orientation property.
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.
Hi @minjung yuk
You can see the OML file bellow.
Hope this helps,
Peter Hieu.