Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Overflow does not act as expect #717

Closed
WildStrom opened this issue Jan 3, 2025 · 3 comments
Closed

Overflow does not act as expect #717

WildStrom opened this issue Jan 3, 2025 · 3 comments
Labels
support Usage questions

Comments

@WildStrom
Copy link

hi, I am using the following rml, and the overflow of item1 did confused me, should I do some extra work to make use of the clip-mask ? the div of item1 should not render over its parent (div container) but the result is not:


<title>Demo</title>
<style>
body
{
position:absolute;
width: 50%;
height: 50%;
margin: auto;
background-color:green;
overflow: hidden hidden;
}

                  .container
		{   position:absolute;
			height:80%;
			width:100%;
			background-color: blue;
			display: block;
			overflow: hidden hidden;
		}

		.item1
		{
			position:absolute;
			font-size:16dp;
			border: 1dp;
			height: 110%;
			width:  50%;
			background-color: red;
		}
	</style>
</head>
<body>
		<div class = "container">
			<div  class="item1"> </div>
		</div>
</body>

the render result of rmlui is:
issue

and the same css which rended in the browser is：
issue2

I am using the default samples code and backend render（It should be SDLrender in mac）.
@mikke89 mikke89 added the support Usage questions label Jan 4, 2025
@mikke89
Copy link
Owner

mikke89 commented Jan 4, 2025

Hi there!

This is a known limitation, and has to do with how clipping works with positioned elements in RmlUi. You can find more background on this in #235. The primary solution is to use clip: always on the container.

This behavior has been documented on the position property, however, I noticed it wasn't mentioned in the documentation of the overflow property, so I added that just now. Hopefully that clears things up a bit for the next user too :)

@WildStrom
Copy link
Author

Hi there!

This is a known limitation, and has to do with how clipping works with positioned elements in RmlUi. You can find more background on this in #235. The primary solution is to use clip: always on the container.

This behavior has been documented on the position property, however, I noticed it wasn't mentioned in the documentation of the overflow property, so I added that just now. Hopefully that clears things up a bit for the next user too :)

Thank you for the message. I have tested the clip: always solution, it solved the problem.

@mikke89
Copy link
Owner

mikke89 commented Jan 6, 2025

Happy to hear that :)

@mikke89 mikke89 closed this as completed Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
support Usage questions
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mikke89 @WildStrom