Overflow does not act as expect
Closed this issue · 3 comments
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:
and the same css which rended in the browser is：
I am using the default samples code and backend render（It should be SDLrender in mac）.
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 :)
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: alwayson 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.
Happy to hear that :)