-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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.
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
Invalid ui node size when creating tree with 5-level depth and 100% height #7994
Comments
Ok, so I have a couple of reduced failing test cases: Test Case 1<div id="test-root" style="min-height:40px">
<div style="height:100%;width: 40px;background: red;"></div>
</div> This fails because Taffy allows the percentage size of the inner node to resolve against the Test Case 2<div id="test-root" style="width: 200px; height: 200px;align-items:start;justify-content:start;">
<div style="min-width: 40px;min-height:40px;margin:5px;padding:5px;background-color:red">
<div style="height:100%;padding:5px;background-color:green">
<div style="height:100%;width: 20px;padding: 5px;background:blue;">
<div></div>
</div>
</div>
</div>
</div> This is basically the same as the original example in the description of this issue. This seems to happen because one of the inner percentage heights (or possibly the inner stretch) is somehow resolving against the available space from the outermost node (although margins/paddings are being subtracted). ThoughtsUnfortunately the solution to this one doesn't seem so simple to me. So it may take a while to be fixed. @jkb0o If you're looking to work around this in the meantime, I would recommend not trying to resolve percentages against |
A couple more comments:
|
@nicoburns Thank you for your attention!
It could be a regression, I tried the same example with bevy
Should I avoid |
Taffy |
There are two possible ways to work around this:
Medium term, it looks like CSS Grid would be perfect for your UI (being that it's a grid). The layout algorithms for this are all implemented. They just need to be wired up Bevy, so this should he available sooner rather than later. |
The example project now looks good! Thank you! |
Almost all my examples looks good now as well! Thank you! |
@jkb0o Just to warn you: things may end up looking more like the chrome screenshot above in future. |
Bevy version
bevy:
0.11.0-dev
21ddc60taffy:
0.3.6
What you did
I create multiple nested ui nodes with depth level at least 5 and provide to them different style params (padding, margin and size):
What went wrong
Setting height to the blue node to
Val::Percent(100.)
makes the outer nodes grow. This happens only if the blue node has another child. On the screenshot the first two nodes use default height, the rest two nodes has100%
height:I expect all nodes are the same size in both cases: if I specify the
100%
height to the blue one or if I add extra empty children to blue nodes.Example project: ui_height_0_11.zip
The text was updated successfully, but these errors were encountered: