Forums » Bugs
RmlUi - overflow property
The RCSS `overflow` property in RmlUi does not appear to be properly hiding content that is too big for its container.
A possibly related issue is that I'm not entirely sure the `clip` property is working properly either.
I created an .RML file for testing all four overflow values at once.
[Pastebin] RmlUi - overflow.rml

https://i.imgur.com/RJ4r1Pi.png
A possibly related issue is that I'm not entirely sure the `clip` property is working properly either.
I created an .RML file for testing all four overflow values at once.
[Pastebin] RmlUi - overflow.rml

https://i.imgur.com/RJ4r1Pi.png
Have you tried this in some sort of RmlUi reference implementation?
We do have an internal test case of the Credits menu with a scroll region that does clip properly. It is using an overflow of 'hidden auto', where hidden is the x axis scroll and the auto is the y axis scroll, I believe.
We do have an internal test case of the Credits menu with a scroll region that does clip properly. It is using an overflow of 'hidden auto', where hidden is the x axis scroll and the auto is the y axis scroll, I believe.
I'm not sure what other RML I could use for reference. I do have another container, where I first noticed this issue. It was much more subtle, because the height of all sub-elements was much less. The content of the TextElements, in my reproduction case, being so long has exaggerated the issue. By breaking down the text in the auto-scroll to the below block of text, the problem almost goes away. However, a few of the sub-elements are still tall enough to peak out occasionally.
---------------------------------------------------
Auto<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et ullamcorper ligula,<br />
sit amet euismod enim. Suspendisse fermentum pretium nisi vitae molestie. Fusce vitae <br />
fringilla nibh, et fermentum arcu. Nam in interdum ex. Vestibulum vitae nisl nunc. Vestibulum<br />
varius imperdiet elit, vitae fringilla arcu luctus quis. Orci varius natoque penatibus et <br />
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eleifend posuere vulputate. <br />
In et velit a nulla maximus rhoncus. Donec libero dui, facilisis ut lectus at, porttitor molestie<br />
sem. Donec mollis turpis elit, et placerat mauris suscipit non.<br />
<br/><br/>
Praesent dictum molestie metus et convallis. Morbi vitae ipsum ornare, consequat lectus at, faucibus<br />
velit. Nullam sit amet congue diam. Cras nec faucibus ligula. Nullam scelerisque feugiat semper.
---------------------------------------------------
Auto<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et ullamcorper ligula,<br />
sit amet euismod enim. Suspendisse fermentum pretium nisi vitae molestie. Fusce vitae <br />
fringilla nibh, et fermentum arcu. Nam in interdum ex. Vestibulum vitae nisl nunc. Vestibulum<br />
varius imperdiet elit, vitae fringilla arcu luctus quis. Orci varius natoque penatibus et <br />
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eleifend posuere vulputate. <br />
In et velit a nulla maximus rhoncus. Donec libero dui, facilisis ut lectus at, porttitor molestie<br />
sem. Donec mollis turpis elit, et placerat mauris suscipit non.<br />
<br/><br/>
Praesent dictum molestie metus et convallis. Morbi vitae ipsum ornare, consequat lectus at, faucibus<br />
velit. Nullam sit amet congue diam. Cras nec faucibus ligula. Nullam scelerisque feugiat semper.
It looks like children of the container that are entirely outside the bounds of the content area are properly clipped. Only children that are partially inside and partially outside the bounds of the content area aren't being properly clipped at the boundary.
So if all of your container child nodes are sanely sized and scrolling never allows one to straddle the boundary of the content area, it seems probable you might not ever encounter this.
So if all of your container child nodes are sanely sized and scrolling never allows one to straddle the boundary of the content area, it seems probable you might not ever encounter this.
It looks like this issue is also affecting <input> fields. Specifically the Username and Password fields on the Login screen, but also other <input>s that I've created for other testing. You can see in the attached image that the Username <input> already has `overflow-x: hidden; overflow-y: hidden`, yet my typing is still overflowing and visible off to the left of the <input> content area boundary.

https://i.imgur.com/DAeiCC0.png

https://i.imgur.com/DAeiCC0.png