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

Clipping issues #116

Closed
rokups opened this issue Jul 31, 2020 · 5 comments
Closed

Clipping issues #116

rokups opened this issue Jul 31, 2020 · 5 comments
Labels
bug Something isn't working

Comments

@rokups
Copy link
Contributor

rokups commented Jul 31, 2020

Moving my report from gitter and adding additional details.

i have a test window and when i resize it to contain all elements - scissors mess up:
image
but if i reduce height so last element gets clipped it starts to work:
image
i verified in renderdoc that indeed in broken variant scissor width is too wide for some reason.

Similar issue also manifests in official samples. For example this is what is visible in transform sample:
image

This is my sample window added to visual tests:

<rml>
<head>
    <link type="text/rcss" href="../style.rcss"/>
    <title>Sample Window</title>
</head>

<body template="window" style="width: 100px;">
    <p>Sample Window</p>
    <div>
        <button>Click!</button>
        <input type="submit" disabled>Click!</input>
        <textarea>Foo...Foo...Foo...Foo...Foo...Foo...Foo...Foo...
Foo...
Foo...
Foo...
Foo...
Foo...
Foo...
Foo...
Foo...
Foo...</textarea>
        <b>Bold text</b>, <i>italic text</i>, <s><span>striked out text</span></s>.
        <hr/>
        <input type="checkbox"/> Greatness
        <br/>
        <input type="text"/>
        <select>
            <option>Foo</option>
            <option>Bar</option>
        </select>
    </div>
</body>
</rml>

image
@mikke89
Copy link
Owner

mikke89 commented Jul 31, 2020

Thanks a lot for the sample. I'll have a look at it :)

The transform sample is actually done like that intentionally (clip: none), so that it is visible as it spins around. But your own samples does look like a bug in RmlUi.

@mikke89 mikke89 added the bug Something isn't working label Jul 31, 2020
mikke89 added a commit that referenced this issue Aug 5, 2020
@mikke89
Fix overflow and clipping issues with 'overflow: auto' and 'overflow:…
c864264 
… hidden' on nested elements. See #116. Some additional tests added.
@rokups
Copy link
Contributor Author

rokups commented Aug 10, 2020

There is one more issue:
image
If i resize window down to clip part of <textarea> or part of <select> at the bottom - that fixes clipping of sticking out element.

mikke89 added a commit that referenced this issue Aug 10, 2020
@mikke89
Fix clipping of overflowing inline content. See #116.
241824e
@mikke89
Copy link
Owner

mikke89 commented Aug 10, 2020

Does this change work for you?

@rokups
Copy link
Contributor Author

rokups commented Aug 10, 2020

oh yes that fixes last issue i was having 👍

@mikke89
Copy link
Owner

mikke89 commented Aug 13, 2020

Great! The fixes have now been merged with master, so I'm closing this :)

@mikke89 mikke89 closed this as completed Aug 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mikke89 @rokups